Function Repository Resource:

# MermaidInk

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

ResourceFunction["MermaidInk"][ retrieves an image defined by the spec |

## Details and Options

TB | top to bottom |

TD | top-down |

BT | bottom to top |

RL | right to left |

LR | left to right |

## Examples

### Basic Examples (2)

Generate a flowchart from a Mermaid specification:

In[1]:= |

Out[1]= |

Create a Graphics expression from a class diagram:

In[2]:= |

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

Out[6]= |

Here is the corresponding mermaid-js image:

In[7]:= |

Out[7]= |

Here is a left-to-right version:

In[8]:= |

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

Out[9]= |

Here we generate the corresponding diagram:

In[10]:= |

Out[10]= |

Create a Sequence Diagram:

In[11]:= |

Out[11]= |

State diagram:

In[12]:= |

Out[12]= |

Entity Relationship Diagram:

In[13]:= |

Out[13]= |

User Journey -- PNG image is obtained and cropped:

In[14]:= |

Out[14]= |