Skip to content

Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

License

Notifications You must be signed in to change notification settings

luke1001/mermaid-live-editor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Mermaid Live Editor Join our Slack!Netlify Status

Contributors are welcome!

If you want to speed up the progress for mermaid-live-editor, join the slack channel and contact knsv.

mermaid-live-editor

Edit, preview and share mermaid charts/diagrams.

Features

  • Edit and preview flowcharts, sequence diagrams, gantt diagrams in real time.
  • Save the result as a svg
  • Get a link to a viewer of the diagram so that you can share it with others.
  • Get a link to edit the diagram so that someone else can tweak it and send a new link back

Live demo

You can try out a live version here.

Docker

Run published image

docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor

To configure renderer URL

When building, Set the Environment variable MERMAID_RENDERER_URL to the rendering service. Default is https://mermaid.ink

To configure Kroki Instance URL

When building, Set the Environment variable MERMAID_KROKI_RENDERER_URL to your Kroki instance. Default is https://kroki.io

Development

docker compose up --build

Then open https://localhost:8000

Setup

Below link will help you making a copy of the repository in your local system.

https://docs.github.com/en/get-started/quickstart/fork-a-repo

Requirements

  • volta to manage node versions.
  • Node.js. volta install node
  • yarn package manager. volta install yarn

Development

yarn install
yarn dev -- --open

This app is created with Svelte Kit.

Release

When a PR is created targeting master, it will be built and deployed by Netlify. The URL will be indicated in a Comment in the PR.

Once the PR is merged, it will automatically be released.

About

Edit, preview and share mermaid charts/diagrams. New implementation of the live editor.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 52.8%
  • Svelte 34.5%
  • JavaScript 9.0%
  • HTML 2.2%
  • Shell 0.7%
  • Dockerfile 0.7%
  • CSS 0.1%