Ebay Products
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/
Motivation
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.
Demo
Usage
1) Generate the diagram code
sequenceDiagram
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:
Markdown
HTML
<img src="http://localhost:3000/diagram/2VxdWVuY2VEaWF"/>
BBCode (Forums)
[img]http://localhost:3000/diagram/2VxdWVuY2VEaWF[/img]
Additional Options
Add the following optional query parameters to add custom dimensions to your images:
(Not yet implemented)
