Basic Examples (2) 

Here is flowchart generate with a Mermaid specification:

In[1]:=

Out[1]=

Here is class diagram that is a Graphics expression:

In[2]:=

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]:=

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]:=

Out[5]=

Here is the corresponding mermaid-js image:

In[6]:=

Out[6]=

Here is a left-to-right version:

In[7]:=

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]:=

Out[8]=

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

In[9]:=

Out[9]=

State diagram:

In[10]:=

Out[10]=

Entity Relationship Diagram:

In[11]:=

Out[11]=

User Journey -- PNG image is obtained and cropped:

In[12]:=

Out[12]=

Gantt chart:

In[13]:=

Out[13]=

Pie chart:

In[14]:=

Out[14]=

Requirement Diagram:

In[15]:=

Out[15]=

Options (5) 

MermaidDirectives (1) 

The option "MermaidDirectives" is used when the first argument is a Graph object. The value of that option is concatenated to the Mermaid graph specification prefix "graph". Here is an example:

In[16]:=

Out[2]=

MermaidOptions (2) 

The value of the option "MermaidOptions" is given to the CLI script "mmds". Here are the CLI options:

Here is examples with using different values for the theme option:

In[17]:=

Out[2]=

Prolog (2) 

The option "Prolog" can be used to used to specify code to be executed before the mermaid-js command. (The default value of the option "source ~/.zshrc".) The option value is passed to the option "Prolog" of ExternalEvaluate. Here is an example:

In[18]:=

Out[18]=

Note that "source ~/.zshrc" makes mermaid-js (the program "mmdc") reachable. if "mmdc" is unreachable, then the last image generated by MermaidJS will be returned (if the corresponding temporary file still exists):

In[19]:=

Out[19]=

Applications (2) 

Markdown-related conversions flowchart:

In[20]:=

Out[20]=

Sequence Diagram: Blogging app service communication:

In[21]:=

Out[21]=

Properties and Relations (1) 

There is a fairly straightforward correspondence between the edge specifications for Graph and Mermaid's graph (and flowchart) specifications. Here are illustrating examples:

In[22]:=

Out[22]=

In[23]:=

Out[23]=

In[24]:=

Out[24]=

Possible Issues (2) 

Make sure mermaid-cli is installed and accessible in WL. It mermaid-cli but cannot be found then (i) set up Shell's path variable(s) in a shell session and use the option "ShellSession" to pass that session to MermaidJS, or (ii) use appropriate Shell command to give to the option "Prolog". Consider using SetOptions. For example, here we use "ShellSession":

Here we use "Prolog":

Neat Examples (2) 

Larger flowchart with some styling:

In[25]:=

Out[25]=

Some interesting interaction:

In[26]:=

Out[26]=