NASA Planetary Mission

    mermaid.ink

    3.8.0 • Public • Published

    mermaid.ink

    GitHub CI

    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.

    The images are generated with transparent background by default. To force a background color, append the query parameter ?bgColor=<color> to the URL. <color> is interpreted as hexadecimal by default. It is possible to use named colors by prefixing the color name with !:

    • https://mermaid.ink/img/<encoded_string>?bgColor=FF0000 will generate a PNG with a red background;
    • https://mermaid.ink/svg/<encoded_string>?bgColor=!lightgray will generate an SVG with a light gray background.

    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

    Keywords

    none

    Install

    npm i mermaid.ink

    DownloadsWeekly Downloads

    7

    Version

    3.8.0

    License

    MIT

    Unpacked Size

    48.3 kB

    Total Files

    24

    Last publish

    Collaborators

    • jihchi