RESTful rendering pipeline for generating sequence and UML diagrams using Mermaid to embed in Github readmes, Markdown docs and more! Mermrender uses Mermaid.JS and Mermaid CLI under the hood.

Credit: https://mermaidjs.github.io/

Setup in VSCode

Check out this awesome guide for setting up diagram rendering within VSCode: https://quintussential.com/archive/2017/12/10/Diagraming-with-Mermaid/


Github doesn’t support rendering Mermaid diagrams in their Markdown editor. Mermaid is a powerful tool that uses a well-defined schema to then interpret diagrams into an SVG. The idea of this tool is to allow embedding images dynamically via a REST endpoint to add UML/Sequence diagrams into your documentation/readmes/markdown files easily, whether the editor supports Mermaid or not.




1) Generate the diagram code

    participant A as Alice
    participant J as John
    A->>J: Hello John, how are you?
    J->>A: Great!

You can edit and render them live on this website: https://mermaidjs.github.io/mermaid-live-editor/

2) Escape the diagram to encode it

Next, you need to run it through an escaper like the following: https://www.freeformatter.com/java-dotnet-escape.html#ad-output

3) Generate the image link to embed

Send a POST request to localhost:3000/encode with a diagram key in the body with the above escaped diagram:

Example Body:

  "diagram": "sequenceDiagramrn    participant Alicern    participant Bobrn    Alice->>John: Hello John, how are you?rn    loop Healthcheckrn        John->>John: Fight against hypochondriarn    endrn    Note right of John: Rational thoughts <br/>prevail...rn    John-->>Alice: Great!rn    John->>Bob: How about you?rn    Bob-->>John: Jolly good!"

This will generate a respose:

  "embed_link": "http://localhost:3000/diagram/2VxdWVuY2VEaWF"

You can embed the following embed_link by using the following syntax:




<img src="http://localhost:3000/diagram/2VxdWVuY2VEaWF"/>

BBCode (Forums)


Additional Options

Add the following optional query parameters to add custom dimensions to your images:

(Not yet implemented)