mermaid.ink

Want to see mermaid.ink in action? Check out this live converter that demonstrates how mermaid.ink transforms Mermaid diagrams into images.

Getting Started

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

Go to http://localhost:3000

Launch a container

See here for supported tags.

docker run --cap-add=SYS_ADMIN -p 3000:3000 ghcr.io/jihchi/mermaid.ink

Go to http://localhost:3000

[!CAUTION]

Generally, launching a container with --cap-add=SYS_ADMIN is not recommended.

Please refer to 3 ways to securely use Chrome Headless with this image

to find the most suitable solution for your case.

Without --cap-add=SYS_ADMIN

You may use Jessie Frazelle's seccomp profile for Chrome instead:

wget https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json
docker run --security-opt seccomp=$(pwd)/chrome.json ghcr.io/jihchi/mermaid.ink

If you run into a core dump error during startup (see #496 for more details), you might want to run it without default seccomp profile.

Without the default seccomp profile

You may launch container without seccomp profile:

docker run --security-opt seccomp=unconfined ghcr.io/jihchi/mermaid.ink

Environment variables

| variable name | default value | description | | ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | MAX_WIDTH | 10000 | Determine the maximum scaled diagram width that can be requested. | | MAX_HEIGHT | 10000 | Determine the maximum scaled diagram height that can be requested. | | FONT_AWESOME_CSS_URL | | Sets a custom URL for the injected font-awesome CSS in the SVG.

The string FA_VERSION will be replaced with the version of font-awesome in use by the application e.g., https://cdnjs.cloudflare.com/ajax/libs/font-awesome/FA_VERSION/css/all.min.css. | | PROTOCOL_TIMEOUT | 180000 | Timeout setting for individual protocol (CDP) calls. See ConnectionOptions > Properties > protocolTimeout for more details | | HEADLESS_MODE | 'true' | Whether to run the browser in headless mode.

'true' launches the browser in the new headless mode.
'shell' launches shell known as the old headless mode.

See LaunchOptions interface > Properties > headless for more details. | | QUEUE_CONCURRENCY | 1 | Sets the maximum number of concurrent rendering jobs. | | QUEUE_ADD_TIMEOUT | 3000 | Defines the timeout duration (in milliseconds) for a rendering job. | | ENABLE_DATABASE | | Enable PostgreSQL database caching. Set to 'true' to enable, otherwise it's disabled. | | PGHOST | | PostgreSQL server hostname. For example: 'localhost'. | | PGPORT | | PostgreSQL server port. For example: 5432. | | PGDATABASE | | PostgreSQL database name. For example: 'postgres'. | | PGUSERNAME | | PostgreSQL username. For example: 'postgres'. | | PGPASSWORD | | PostgreSQL password |

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

• If running via docker, use NODE_OPTIONS to increase --max-http-header-size

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

Contributors

Many thanks for your help!

The image of contributors is made with contrib.rocks.