GitHub - Schachte/Mermrender: ?♀️ RESTful rendering pipeline for generating seq...
source link: https://github.com/Schachte/Mermrender
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
?♀️ Mermrender
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.
Feel free to contribute by making a pull request!
Maintainer: [email protected]
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 with Mermaid OR PlantUML
sequenceDiagram
participant A as Alice
participant J as John
A->>J: Hello John, how are you?
J->>A: Great!
or
@startuml
object Object01
object Object02
object Object03
object Object04
object Object05
object Object06
object Object07
object Object08
Object01 <|-- Object02
Object03 *-- Object04
Object05 o-- "4" Object06
Object07 .. Object08 : some labels
@enduml
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 http://localhost:3000/encode/plantuml
or http://localhost:3000/encode/mermaid
depending on the type with a diagram
key in the body with the above escaped diagram:
Example Body:
{
"diagram": "sequenceDiagram\r\n participant Alice\r\n participant Bob\r\n Alice->>John: Hello John, how are you?\r\n loop Healthcheck\r\n John->>John: Fight against hypochondria\r\n end\r\n Note right of John: Rational thoughts <br/>prevail...\r\n John-->>Alice: Great!\r\n John->>Bob: How about you?\r\n 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
![alt_caption](http://localhost:3000/diagram/2VxdWVuY2VEaWF)
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)
How To Run
npm i
to install dependenciesnode index.js
sudo npm install -g node-plantuml
sudo npm install -g mermaid.cli
Recommend
-
94
Hitchhiker Api is a Restful Api integrated testing tool that support Schedule, Response comparsion, Stress Test, support upload js file to hook request, easy to deploy it in your local server. It make easier to manage Api with your team. Go...
-
145
GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
-
62
README.md
-
24
README.md
-
35
README.md
-
46
© Shutterstock / Joe West Oracle and JetBrains engineers proposed to collaborate on a graphics rendering pipeline to replace...
-
39
README.md REST API SDK for PHP
-
49
README.md Shiro+JWT+Spring Boot Restful简易教程 序言 我也是半路出家的人,如果大家有什么好的意见或批评,请务必issue下。 项...
-
5
Companies developing software for mobile, embedded or desktop environments often find the graphics and rendering software stack to be one of their greatest challenges. The most successful devices and software platforms have optimized...
-
6
Generating Documents using a RESTful, Asynchronous Web API using WebHooks Document Processing Web API Implementing a Web API to create documents is a very popular and useful w...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK