Wolfram Cloud Resource Object

Function Resource

Function Repository Resource:

 MermaidInk

Source Notebook

Get an image corresponding to a Mermaid-js specification via the web Mermaid-ink interface of Mermaid-js

Contributed by: Anton Antonov

ResourceFunction["MermaidInk"][s]

retrieves an image defined by the spec s from Mermaid's Ink Web interface.

Details and Options

Mermaid lets you create diagrams and visualizations using text and code.
Mermaid has different types of diagrams: Flowchart, Sequence Diagram, Class Diagram, State Diagram, Entity Relationship Diagram, User Journey, Gantt, Pie Chart, Requirement Diagram, and others. It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
ResourceFunction["MermaidInk"] uses the Mermaid's functionalities via the Web interface "https://mermaid.ink/img".
The first argument can be a string (that is, a mermaid-js specification) or a Graph object.
The option "MermaidDirectives" can be used to control the layout of Mermaid diagrams if the first argument is a Graph object. The accepted orientations are given below:
TBtop to bottom
TDtop-down
BTbottom to top
RLright to left
LRleft to right
ResourceFunction["MermaidInk"] produces images.

Examples

Basic Examples (2) 

Generate a flowchart from a Mermaid specification:

In[1]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][" graph TD WL --> |ZMQ|Python --> |ZMQ|WL "]
Out[1]=

Create a Graphics expression from a class diagram:

In[2]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][" classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } "]
Out[2]=

Scope (9) 

The first argument can be a Graph object -- the corresponding Mermaid-js graph is produced. Here is a random graph that has both directed and undirected edges (some edges have tags):

In[3]:=
SeedRandom[45]; gr = GraphUnion[RandomGraph[{3, 2}, DirectedEdges -> True], RandomGraph[{4, 4}, DirectedEdges -> False]]; gr = Graph[ Map[RandomChoice[{#, Append[#, RandomWord[]]}] &, EdgeList[gr]], VertexLabels -> "Name", EdgeLabels -> "EdgeTag"]; gr
Out[6]=

Here is the corresponding mermaid-js image:

In[7]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][gr]
Out[7]=

Here is a left-to-right version:

In[8]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][gr, "MermaidDirectives" -> "LR"]
Out[8]=

Very often Large Language Models (LLMs) produce Mermaid-JS code as a Markdown fenced code block. By default the fences are removed. Here we generate a Mermaid-JS diagram:

In[9]:=
spec = LLMSynthesize[{"Give a concise Mermaid-JS diagram of continents' land connections.", LLMPrompt["NothingElse"]["Mermaid-JS"]}]
Out[9]=

Here we generate the corresponding diagram:

In[10]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][spec]
Out[10]=

Create a Sequence Diagram:

In[11]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]]["sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later!"]
Out[11]=

State diagram:

In[12]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][" stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] "]
Out[12]=

Entity Relationship Diagram:

In[13]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][" erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses "]
Out[13]=

User Journey -- PNG image is obtained and cropped:

In[14]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidInk"]][" journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me "]
Out[14]=