Skip to content

Given a mermaid code (markdown-like), output an image to you

License

Notifications You must be signed in to change notification settings

pscsmoke/mermaid.ink

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GitHub Travis build status Docker Cloud Build Status Docker Pulls

Getting Started

git clone https://github.com/jihchi/mermaid.ink.git
cd mermaid.ink
yarn
DEBUG=app:* yarn start

Open demo.html in your browser.

Demo

Given a mermaid code:

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]

Paste it onto mermaid-live-editor, you will get encoded string from the editor, for example:

eyJjb2RlIjoiZ3JhcGggVERcbkFbQ2hyaXN0bWFzXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuQiAtLT4gQ3tMZXQgbWUgdGhpbmt9XG5DIC0tPnxPbmV8IERbTGFwdG9wXVxuQyAtLT58VHdvfCBFW2lQaG9uZV1cbkMgLS0-fFRocmVlfCBGW2ZhOmZhLWNhciBDYXJdXG4iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ

Append the encoded string to the service URL, for example: https://mermaid.ink/img/<encoded_string>, you will get an image from the URL:

Flowchart

You could treat it as normal image and embed everywhere you want.

Test

yarn test

Troubleshooting

I'm getting back HTTP 431 Request Header Fields Too Large error

Note that you may encounter DoS if you increase --max-http-header-size!

Thanks @ryepup for the analysis and work-arounds (#12)

  • If running locally, add --max-http-header-size to the start script in package.json

    • e.g. "start": "node --max-http-header-size=102400000 src/index.js"
  • If running via docker, use NODE_OPTIONS to increase --max-http-header-size

    • e.g. docker run --rm -it -e 'NODE_OPTIONS="--max-http-header-size=102400000"' -p 3000:3000 jihchi/mermaid.ink

Or, If running locally, run NODE_OPTIONS="--max-http-header-size=102400000" npm start to increase --max-http-header-size

About

Given a mermaid code (markdown-like), output an image to you

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 62.7%
  • HTML 31.9%
  • Dockerfile 4.6%
  • CSS 0.8%