Wolfram Cloud Resource Object

Function Resource

Function Repository Resource:

 MermaidJS

Source Notebook

Returns an image corresponding to a mermaid-js specification via the command line interface of mermaid-js

Contributed by: Anton Antonov

ResourceFunction["MermaidJS"][s]

invokes Mermaid's Command Line Interface (CLI) with the spec s and imports the result.

ResourceFunction["MermaidJS"][s,t]

specifies Mermaid's CLI output to be of type t.

ResourceFunction["MermaidJS"][s,t,copts]

invokes Mermaid's CLI with the options copts.

Details and Options

Mermaid lets you create diagrams and visualizations using text and code.
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
ResourceFunction["MermaidJS"] uses the Command Line Interface (CLI) to Mermaid's functionalities via the Shell function mmdc.
This means that mmdc (aka "mermaid-cli") have to be installed on the computer executing ResourceFunction["MermaidJS"].
ResourceFunction["MermaidJS"] passes a Mermaid spec to mmdc.
The script mmdc generates a PNG, PDF, of SVG file, that file is placed in a temporary directory, and it is imported by ResourceFunction["MermaidJS"].
By default ResourceFunction["MermaidJS"] requets mmdc with to generate a PNG image.
If a PDF type is specified, them ResourceFunction["MermaidJS"] imports the resulting PDF file as a graphics expression. (Using Import[__,"PageGraphics"].)
The first argument can be a string (that is a mermaid-js specification) or a Graph object.

Examples

Basic Examples (2) 

Here is flowchart generate with a Mermaid specification:

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

Here is class diagram that is a Graphics expression:

In[2]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidJS"]][" 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() } ", "PDF", ImageSize -> Large]
Out[2]=

Scope (11) 

Additional options can be passed to mmdc with the third argument of MermaidJS. For example, if the PNG images are with too low resolution then the mmdc"--scale" option can be used:

In[3]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidJS"]][" graph LR WL --> |ZMQ|Python --> |ZMQ|WL ", "PNG", "MermaidOptions" -> "--scale 2"]
Out[3]=

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[4]:=
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[5]=

Here is the corresponding mermaid-js image:

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

Here is a left-to-right version:

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

Mermaid has a different type of diagrams: Flowchart, Sequence Diagram, Class Diagram, State Diagram, Entity Relationship Diagram, User Journey, Gantt, Pie Chart, Requirement Diagram, and others.

Sequence Diagram:

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

Here is Graphics expression of a Class Diagram obtained via a PDF file additionally tweaked to have large image size:

In[9]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidJS"]][" 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() } ", "PDF"] // Append[#, ImageSize -> Large] &
Out[9]=

State diagram:

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

Entity Relationship Diagram:

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

User Journey -- PNG image is obtained and cropped:

In[12]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidJS"]][" 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 "] // ImageCrop
Out[12]=

Gantt chart:

In[13]:=
ResourceFunction[ CloudObject[ "https://www.wolframcloud.com/obj/antononcube/DeployedResources/Function/MermaidJS"]][" gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d "]
Out[13]=