# Table of Contents
- [404 | Mermaid](#404-mermaid)
- [Mermaid | Diagramming and charting tool](#mermaid-diagramming-and-charting-tool)
- [About Mermaid | Mermaid](#about-mermaid-mermaid)
- [Getting Started | Mermaid](#getting-started-mermaid)
- [Announcements | Mermaid](#announcements-mermaid)
- [Integrations | Mermaid](#integrations-mermaid)
- [Tutorials | Mermaid](#tutorials-mermaid)
- [Mermaid User Guide | Mermaid](#mermaid-user-guide-mermaid)
- [Flowcharts Syntax | Mermaid](#flowcharts-syntax-mermaid)
- [Usage | Mermaid](#usage-mermaid)
- [defaultConfig | Mermaid](#defaultconfig-mermaid)
- [Packet Diagram Config Schema | Mermaid](#packet-diagram-config-schema-mermaid)
- [Radar Diagram Config Schema | Mermaid](#radar-diagram-config-schema-mermaid)
- [config | Mermaid](#config-mermaid)
- [mermaid | Mermaid](#mermaid-mermaid)
- [Unknown](#unknown)
- [Class: UnknownDiagramError | Mermaid](#class-unknowndiagramerror-mermaid)
- [Variable: configKeys | Mermaid](#variable-configkeys-mermaid)
- [Interface: DetailedError | Mermaid](#interface-detailederror-mermaid)
- [Variable: default | Mermaid](#variable-default-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Function: getSiteConfig() | Mermaid](#function-getsiteconfig-mermaid)
- [Interface: LayoutLoaderDefinition | Mermaid](#interface-layoutloaderdefinition-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Function: reset() | Mermaid](#function-reset-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Interface: ExternalDiagramDefinition | Mermaid](#interface-externaldiagramdefinition-mermaid)
- [Function: addDirective() | Mermaid](#function-adddirective-mermaid)
- [Function: getConfig() | Mermaid](#function-getconfig-mermaid)
- [Function: sanitize() | Mermaid](#function-sanitize-mermaid)
- [Variable: defaultConfig | Mermaid](#variable-defaultconfig-mermaid)
- [Interface: LayoutData | Mermaid](#interface-layoutdata-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled boolean in Mermaid Config Schema | Mermaid](#untitled-boolean-in-mermaid-config-schema-mermaid)
- [Interface: MermaidConfig | Mermaid](#interface-mermaidconfig-mermaid)
- [Function: saveConfigFromInitialize() | Mermaid](#function-saveconfigfrominitialize-mermaid)
- [Interface: ParseOptions | Mermaid](#interface-parseoptions-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Function: setConfig() | Mermaid](#function-setconfig-mermaid)
- [Interface: RenderOptions | Mermaid](#interface-renderoptions-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Interface: ParseResult | Mermaid](#interface-parseresult-mermaid)
- [Interface: RenderResult | Mermaid](#interface-renderresult-mermaid)
- [Function: setSiteConfig() | Mermaid](#function-setsiteconfig-mermaid)
- [Function: updateCurrentConfig() | Mermaid](#function-updatecurrentconfig-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Function: updateSiteConfig() | Mermaid](#function-updatesiteconfig-mermaid)
- [Interface: RunOptions | Mermaid](#interface-runoptions-mermaid)
- [Type Alias: SVG | Mermaid](#type-alias-svg-mermaid)
- [Interface: Mermaid | Mermaid](#interface-mermaid-mermaid)
- [Type Alias: SVGGroup | Mermaid](#type-alias-svggroup-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Type Alias: InternalHelpers | Mermaid](#type-alias-internalhelpers-mermaid)
- [Type Alias: ParseErrorFunction() | Mermaid](#type-alias-parseerrorfunction-mermaid)
- [Variable: default | Mermaid](#variable-default-mermaid)
- [Base Diagram Config Schema | Mermaid](#base-diagram-config-schema-mermaid)
- [Untitled number in Mermaid Config Schema | Mermaid](#untitled-number-in-mermaid-config-schema-mermaid)
- [Untitled boolean in Mermaid Config Schema | Mermaid](#untitled-boolean-in-mermaid-config-schema-mermaid)
---
# 404 | Mermaid
[Skip to content](https://mermaid.js.org/syntax/#VPContent)
404
PAGE NOT FOUND
==============
> But if you don't change your direction, and if you keep looking, you may end up where you are heading.
[Take me home](https://mermaid.js.org/)
Opens in MermaidChart.com
---
# Mermaid | Diagramming and charting tool
[Skip to content](https://mermaid.js.org/#VPContent)
[Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart Try now](https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle)
MermaidDiagramming and charting tool
====================================
JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
[Try Editor](https://mermaid.live/edit)
[Get started](https://mermaid.js.org/intro/)
[\
\
Easy to use\
-----------\
\
Easily create diagrams and charts with the Mermaid Live Editor.](https://mermaid.live/)
[\
\
Integrations available\
----------------------\
\
Use Mermaid with your favorite applications, check out the integrations list.](https://mermaid.js.org/ecosystem/integrations-community.html)
[\
\
Award winning\
-------------\
\
2019 JavaScript Open Source Award winner for "The Most Exciting Use of Technology".](https://osawards.com/javascript/2019)
Meet The Team
-------------
Knut Sveidqvist
===============
Creator
[](https://github.com/knsv)
[](https://twitter.com/knutsveidqvist)
[Sponsor](https://github.com/sponsors/knsv)
Sidharth Vinod
==============
Developer
[](https://github.com/sidharthv96)
[](https://techhub.social/@sidv)
[](https://twitter.com/sidv42)
[](https://sidharth.dev/)
[](https://www.linkedin.com/in/sidharth-vinod)
[Sponsor](https://github.com/sponsors/sidharthv96)
Ashish Jain
===========
Developer
[](https://github.com/ashishjain0512)
Neil Cuzon
==========
Developer
[](https://github.com/NeilCuzon)
Tyler Liu
=========
Developer
[](https://github.com/tylerlong)
Alois Klink
===========
Developer
[](https://github.com/aloisklink)
[](https://aloisklink.com/)
[](https://www.linkedin.com/in/aloisklink)
Reda Al Sulais
==============
Developer
[](https://github.com/Yokozuna59)
Nikolay Rozhkov
===============
Developer
[](https://github.com/nirname)
Justin Greywolf
===============
Developer
[](https://github.com/jgreywolf)
Steph Huynh
===========
Developer
[](https://github.com/huynhicode)
Matthieu Morel
==============
Developer
[](https://github.com/mmorel-35)
[](https://www.linkedin.com/in/matthieumorel35)
Marc Faber
==========
Developer
[](https://github.com/GDFaber)
[](https://www.linkedin.com/in/marc-faber)
Yash Singh
==========
Developer
[](https://github.com/Yash-Singh1)
Nacho Orlandoni
===============
Developer
[](https://github.com/IOrlandoni)
Per Brolin
==========
Developer
[](https://github.com/pbrolin47)
Mindaugas Laganeckas
====================
Developer
[](https://github.com/MindaugasLaganeckas)
Contributors
------------
[](https://github.com/sidharthv96)
[](https://github.com/knsv)
[](https://github.com/ashishjain0512)
[](https://github.com/NeilCuzon)
[](https://github.com/tylerlong)
[](https://github.com/aloisklink)
[](https://github.com/Yokozuna59)
[](https://github.com/weedySeaDragon)
[](https://github.com/nirname)
[](https://github.com/saurabhg772244)
[](https://github.com/jgreywolf)
[](https://github.com/huynhicode)
[](https://github.com/mmorel-35)
[](https://github.com/NicolasNewman)
[](https://github.com/yari-dewalt)
[](https://github.com/jsoref)
[](https://github.com/GDFaber)
[](https://github.com/klemmchr)
[](https://github.com/ibrahimWassouf)
[](https://github.com/Yash-Singh1)
[](https://github.com/omkarht)
[](https://github.com/cmmoran)
[](https://github.com/Shahir-47)
[](https://github.com/subhash-halder)
[](https://github.com/shubham-mermaid)
[](https://github.com/IOrlandoni)
[](https://github.com/mathbraga)
[](https://github.com/raghur)
[](https://github.com/ad1992)
[](https://github.com/pbrolin47)
[](https://github.com/SeanKilleen)
[](https://github.com/erelling)
[](https://github.com/spopida)
[](https://github.com/emersonbottero)
[](https://github.com/Ronid1)
[](https://github.com/bollwyvl)
[](https://github.com/ilyes-ced)
[](https://github.com/guypursey)
[](https://github.com/bjowes)
[](https://github.com/dbartholomae)
[](https://github.com/Andre601)
[](https://github.com/rowanfr)
[](https://github.com/gibson042)
[](https://github.com/FutzMonitor)
[](https://github.com/RounakJoshi09)
[](https://github.com/tomperr)
[](https://github.com/chrismoran-bkt)
[](https://github.com/abzicht)
[](https://github.com/ReneLombard)
[](https://github.com/rajat-ht)
[](https://github.com/Austin-Fulbright)
[](https://github.com/leinelissen)
[](https://github.com/monicanguyen25)
[](https://github.com/darshanr0107)
[](https://github.com/Abrifq)
[](https://github.com/gwincr11)
[](https://github.com/pranavm2109)
[](https://github.com/thomascizeron)
[](https://github.com/spier)
[](https://github.com/mearns)
[](https://github.com/dreathed)
[](https://github.com/remcohaszing)
[](https://github.com/devbyharshit)
[](https://github.com/generrosity)
[](https://github.com/BambioGaming)
[](https://github.com/BastianZim)
[](https://github.com/JeremyFunk)
[](https://github.com/mastersibin)
[](https://github.com/devcer)
[](https://github.com/Billiam)
[](https://github.com/megantriplett)
[](https://github.com/rflban)
[](https://github.com/sagea)
[](https://github.com/DKurilo)
[](https://github.com/fzag)
[](https://github.com/gijswijs)
[](https://github.com/pinghe)
[](https://github.com/timmaffett)
[](https://github.com/ksilverwall)
[](https://github.com/ciekawy)
[](https://github.com/BryanCrotaz)
[](https://github.com/lexmin0412)
[](https://github.com/arpitjain099)
[](https://github.com/karistom)
[](https://github.com/koljatm-edeka)
[](https://github.com/notquiterussell)
[](https://github.com/spect88)
[](https://github.com/lishid)
[](https://github.com/oleveau)
[](https://github.com/ted-marozzi)
[](https://github.com/dontry)
[](https://github.com/jakobskrym)
[](https://github.com/janjonas)
[](https://github.com/MrCoder)
[](https://github.com/dany74q)
[](https://github.com/johnnywalker)
[](https://github.com/72636c)
[](https://github.com/therzka)
[](https://github.com/fardog)
[](https://github.com/koppor)
[](https://github.com/Mister-Hope)
[](https://github.com/arpansaha13)
[](https://github.com/Xstoudi)
[](https://github.com/vallsv)
[](https://github.com/flying-sheep)
[](https://github.com/elliot-nelson)
[](https://github.com/nacc)
[](https://github.com/fabiospampinato)
[](https://github.com/ggrossetie)
[](https://github.com/adamwulf)
[](https://github.com/BaumiCoder)
[](https://github.com/iansan5653)
[](https://github.com/HustLion)
[](https://github.com/eajenkins)
[](https://github.com/harshilparmar)
[](https://github.com/Guy-Adler)
[](https://github.com/kamalkishor1991)
[](https://github.com/tommoor)
[](https://github.com/deining)
[](https://github.com/swoyam2609)
[](https://github.com/sechel)
[](https://github.com/stanhu)
[](https://github.com/pierrickouw)
[](https://github.com/MasonM)
[](https://github.com/LarryKlugerDS)
[](https://github.com/BastiDood)
[](https://github.com/DanShai)
[](https://github.com/gregberge)
[](https://github.com/cm-wada-yusuke)
[](https://github.com/luin)
[](https://github.com/MikeJeffers)
[](https://github.com/quilicicf)
[](https://github.com/ymgch)
[](https://github.com/yutotnh)
[](https://github.com/Omerr)
[](https://github.com/arnaud-zg)
[](https://github.com/BD103)
[](https://github.com/abhijeet-pathak)
[](https://github.com/crodriguez1a)
[](https://github.com/danangtomo)
[](https://github.com/FlorianWoelki)
[](https://github.com/iwestlin)
[](https://github.com/Jason3S)
[](https://github.com/jeswr)
[](https://github.com/Jmuccigr)
[](https://github.com/faisalarbain)
[](https://github.com/joshuacolvin)
[](https://github.com/khiga8)
[](https://github.com/keenanjt33)
[](https://github.com/Will-Low)
[](https://github.com/lf-novelt)
[](https://github.com/vitorsss)
[](https://github.com/mribeirodantas)
[](https://github.com/ginomempin)
[](https://github.com/eitsupi)
[](https://github.com/anugs)
[](https://github.com/abeaton)
[](https://github.com/husa)
[](https://github.com/thomasleveil)
[](https://github.com/Spiderpig86)
[](https://github.com/ThanasisMpalatsoukas)
[](https://github.com/SahilNagpure07)
[](https://github.com/Rutorai)
[](https://github.com/Mandzhi)
[](https://github.com/itsalam)
[](https://github.com/lilisha100)
[](https://github.com/nekikara)
[](https://github.com/nothingismagick)
[](https://github.com/nourhenta)
[](https://github.com/phairow)
[](https://github.com/rhysd)
[](https://github.com/udvale)
[](https://github.com/Incognito)
[](https://github.com/chadfawcett)
[](https://github.com/jsyang)
[](https://github.com/naveensrinivasan)
[](https://github.com/vijay40)
[](https://github.com/Aniket1026)
[](https://github.com/bish0polis)
[](https://github.com/CalebUsadi)
[](https://github.com/Ryuno-Ki)
[](https://github.com/adamazing)
[](https://github.com/0xflotus)
[](https://github.com/gene1wood)
[](https://github.com/gillesdemey)
[](https://github.com/guilhermgonzaga)
[](https://github.com/igorwessel)
[](https://github.com/jason-curtis)
[](https://github.com/jeroen-ekkelkamp)
[](https://github.com/josh-bouganim-avant)
[](https://github.com/Pr0dt0s)
[](https://github.com/pbendersky)
[](https://github.com/begleynk)
[](https://github.com/doble-eme)
[](https://github.com/mahomedalid)
[](https://github.com/tmatz)
[](https://github.com/lindseywild)
[](https://github.com/Valentine14th)
[](https://github.com/JoshSharpe)
[](https://github.com/loris-intergalactique)
[](https://github.com/kshitijsaksena)
[](https://github.com/knuts-ic)
[](https://github.com/heyfirst)
[](https://github.com/el-mapache)
[](https://github.com/tristan-f-r)
[](https://github.com/TomWright)
[](https://github.com/vertxxyz)
[](https://github.com/The-Alchemist)
[](https://github.com/iSparsh)
[](https://github.com/csholmq)
[](https://github.com/larkinscott)
[](https://github.com/chaursiyasanjeet)
[](https://github.com/rheggen)
[](https://github.com/BoDonkey)
[](https://github.com/rlmark)
[](https://github.com/rmedaer)
[](https://github.com/phschaer)
[](https://github.com/omer-priel)
[](https://github.com/OlegAxenow)
[](https://github.com/IanLee1521)
[](https://github.com/uttk)
[](https://github.com/universeroc)
[](https://github.com/sy-records)
[](https://github.com/fork-boy)
[](https://github.com/nashtechlabs)
[](https://github.com/kimulaco)
[](https://github.com/jasmaa)
[](https://github.com/ilmari-lauhakangas)
[](https://github.com/gbremond)
[](https://github.com/ellenealds)
[](https://github.com/edumicse)
[](https://github.com/d-faure)
[](https://github.com/Jeff-Tian)
[](https://github.com/brookhong)
[](https://github.com/arukiidou)
[](https://github.com/Zer0n0mask)
[](https://github.com/sinedied)
[](https://github.com/Vrixyz)
[](https://github.com/tshepang)
[](https://github.com/hrgui)
[](https://github.com/Gusted)
[](https://github.com/ggpasqualino)
[](https://github.com/frankschmitt)
[](https://github.com/ferozmht)
[](https://github.com/kislerdm)
[](https://github.com/dsogari)
[](https://github.com/dennis0324)
[](https://github.com/DawMatt)
[](https://github.com/cbugk)
[](https://github.com/raiman264)
[](https://github.com/ashleybartlett)
[](https://github.com/ashsearle)
[](https://github.com/andrew-clarkson)
[](https://github.com/AndreasVolkmann)
[](https://github.com/alex-titarenko)
[](https://github.com/AlexMooney)
[](https://github.com/AaronMoat)
[](https://github.com/Olegt0rr)
[](https://github.com/OG-NI)
[](https://github.com/NourBenz)
[](https://github.com/NicolasCwy)
[](https://github.com/namgivu)
[](https://github.com/u-minor)
[](https://github.com/MindaugasLaganeckas)
[](https://github.com/Mikek16)
[](https://github.com/mcbeelen)
[](https://github.com/jbednar)
[](https://github.com/jrdavismaine)
[](https://github.com/jbriales)
[](https://github.com/JingyuMarcelLee)
[](https://github.com/jayvdb)
[](https://github.com/jonabc)
[](https://github.com/jbronson-sf)
[](https://github.com/karthxk07)
[](https://github.com/lauraceconi)
[](https://github.com/lorint)
[](https://github.com/connor4312)
[](https://github.com/conradagramont)
[](https://github.com/DCsunset)
[](https://github.com/activus-d)
[](https://github.com/DanInProgress)
[](https://github.com/danielcompton)
[](https://github.com/egnor)
[](https://github.com/cakemanny)
[](https://github.com/Olshansk)
[](https://github.com/danielsitnik)
[](https://github.com/DannyBen)
[](https://github.com/dariuswiles)
[](https://github.com/Clint-Chester)
[](https://github.com/claesgill)
[](https://github.com/Whoeza)
[](https://github.com/ct-martin)
[](https://github.com/Odogwudozilla)
[](https://github.com/beaudry)
[](https://github.com/ctruelson)
[](https://github.com/dodoinblue)
[](https://github.com/watsoncj)
[](https://github.com/carbeer)
[](https://github.com/andriy-koz)
[](https://github.com/GRASBOCK)
[](https://github.com/l2fprod)
[](https://github.com/Foo-x)
[](https://github.com/fkohrt)
[](https://github.com/filipedeschamps)
[](https://github.com/fregante)
[](https://github.com/fabalchemy)
[](https://github.com/Erhannis)
[](https://github.com/glensc)
[](https://github.com/Eji4h)
[](https://github.com/ebjornset)
[](https://github.com/thedustin)
[](https://github.com/dsblank)
[](https://github.com/quickstep25)
[](https://github.com/dfinke)
[](https://github.com/dwinston)
[](https://github.com/dbussink)
[](https://github.com/dbrans)
[](https://github.com/detj)
[](https://github.com/DavidWittman)
[](https://github.com/davidpendraykalibrate)
[](https://github.com/daveaglick)
[](https://github.com/DarkNami)
[](https://github.com/andrew-demb)
[](https://github.com/andrewschleifer)
[](https://github.com/sublimino)
[](https://github.com/AndrewL-64)
[](https://github.com/NKjoep)
[](https://github.com/ajthinking)
[](https://github.com/abitrolly)
[](https://github.com/amyq)
[](https://github.com/alwinw)
[](https://github.com/alvynmcq)
[](https://github.com/zag)
[](https://github.com/alexislefebvre)
[](https://github.com/adjerbetian)
[](https://github.com/Timac)
[](https://github.com/theHacker)
[](https://github.com/aledileo)
[](https://github.com/AlanHohn)
[](https://github.com/AielloChan)
[](https://github.com/ameech)
[](https://github.com/adam-hotait)
[](https://github.com/adutton)
[](https://github.com/CollierCZ)
[](https://github.com/carlosblanco)
[](https://github.com/hydrosquall)
[](https://github.com/craigmac)
[](https://github.com/macherel)
[](https://github.com/xbojch)
[](https://github.com/jawn)
[](https://github.com/bstordrup)
[](https://github.com/ben-page)
[](https://github.com/Barry1)
[](https://github.com/bglnelissen)
[](https://github.com/Baraka24)
[](https://github.com/politbuero-kampagnen)
[](https://github.com/toolness)
[](https://github.com/AsaAyers)
[](https://github.com/Arthaey)
[](https://github.com/arfanliaqat)
[](https://github.com/saveman71)
[](https://github.com/ajdamico)
[](https://github.com/antco25)
[](https://github.com/AnnaTomanek)
[](https://github.com/aniston)
[](https://github.com/anishkny)
[](https://github.com/6footgeek)
[Join the community](https://discord.gg/sKeNQX4Wtj)
and get involved!
Opens in MermaidChart.com
---
# About Mermaid | Mermaid
[Skip to content](https://mermaid.js.org/intro/#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
About Mermaid [β](https://mermaid.js.org/intro/#about-mermaid)
===============================================================
**Mermaid lets you create diagrams and visualizations using text and code.**
It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
> If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](https://mermaid.js.org/intro/syntax-reference.html)
> .
[](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml)
[](https://www.npmjs.com/package/mermaid)
[](https://bundlephobia.com/package/mermaid)
[](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
[](https://discord.gg/sKeNQX4Wtj)
[](https://twitter.com/mermaidjs_)
[](https://mermaid-js.github.io/mermaid/landing/)
Mermaid is a JavaScript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.
> Doc-Rot is a Catch-22 that Mermaid helps to solve.
Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning.
Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).
Mermaid allows even non-programmers to easily create detailed and diagrams through the [Mermaid Live Editor](https://mermaid.live/)
.
[Tutorials](https://mermaid.js.org/ecosystem/tutorials.html)
has video tutorials.
Use Mermaid with your favorite applications, check out the list of [Community Integrations](https://mermaid.js.org/ecosystem/integrations-community.html)
.
For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](https://mermaid.js.org/intro/getting-started.html)
and [Usage](https://mermaid.js.org/config/usage.html)
.
π [CDN](https://www.jsdelivr.com/package/npm/mermaid)
| π [Documentation](https://mermaidjs.github.io/)
| π [Contribution](https://mermaid.js.org/community/contributing.html)
| π [Plug-Ins](https://mermaid.js.org/ecosystem/integrations-community.html)
> π Keep a steady pulse: [mermaid needs more Collaborators](https://github.com/mermaid-js/mermaid/issues/866)
> .
π **Mermaid was nominated and won the [JS Open Source Awards (2019)](https://osawards.com/javascript/#nominees)
in the category "The most exciting use of technology"!!!**
**Thanks to all involved, people committing pull requests, people answering questions and special thanks to Tyler Long who is helping me maintain the project π**
Our PR Visual Regression Testing is powered by [Argos](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss)
with their generous Open Source plan. It makes the process of reviewing PRs with visual changes a breeze.
[](https://argos-ci.com/?utm_source=mermaid&utm_campaign=oss)
In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/)
. Applitools is a great service which has been easy to use and integrate with our tests.
[](https://applitools.com/)
Diagram Types [β](https://mermaid.js.org/intro/#diagram-types)
---------------------------------------------------------------
### [Flowchart](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax)
[β](https://mermaid.js.org/intro/#flowchart)
##### Code:
mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Ctrl + Enter|Run βΆ
### [Sequence diagram](https://mermaid.js.org/syntax/sequenceDiagram.html)
[β](https://mermaid.js.org/intro/#sequence-diagram)
##### Code:
mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop HealthCheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Ctrl + Enter|Run βΆ
### [Gantt diagram](https://mermaid.js.org/syntax/gantt.html)
[β](https://mermaid.js.org/intro/#gantt-diagram)
##### Code:
mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
Ctrl + Enter|Run βΆ
### [Class diagram](https://mermaid.js.org/syntax/classDiagram.html)
[β](https://mermaid.js.org/intro/#class-diagram)
##### Code:
mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
Ctrl + Enter|Run βΆ
### [Git graph](https://mermaid.js.org/syntax/gitgraph.html)
[β](https://mermaid.js.org/intro/#git-graph)
##### Code:
mermaid
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
Ctrl + Enter|Run βΆ
### [Entity Relationship Diagram - β experimental](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)
[β](https://mermaid.js.org/intro/#entity-relationship-diagram-experimental)
##### Code:
mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
Ctrl + Enter|Run βΆ
### [User Journey Diagram](https://mermaid.js.org/syntax/userJourney.html)
[β](https://mermaid.js.org/intro/#user-journey-diagram)
##### Code:
mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Ctrl + Enter|Run βΆ
### [Quadrant Chart](https://mermaid.js.org/syntax/quadrantChart.html)
[β](https://mermaid.js.org/intro/#quadrant-chart)
##### Code:
mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Ctrl + Enter|Run βΆ
### [XY Chart](https://mermaid.js.org/syntax/xyChart.html)
[β](https://mermaid.js.org/intro/#xy-chart)
##### Code:
mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Ctrl + Enter|Run βΆ
Installation [β](https://mermaid.js.org/intro/#installation)
-------------------------------------------------------------
**In depth guides and examples can be found at [Getting Started](https://mermaid.js.org/intro/getting-started.html)
and [Usage](https://mermaid.js.org/config/usage.html)
.**
**It would also be helpful to learn more about mermaid's [Syntax](https://mermaid.js.org/intro/syntax-reference.html)
.**
### CDN [β](https://mermaid.js.org/intro/#cdn)
https://cdn.jsdelivr.net/npm/mermaid@/dist/
To select a version:
Replace `` with the desired version number.
Latest Version: [https://cdn.jsdelivr.net/npm/mermaid@11](https://cdn.jsdelivr.net/npm/mermaid@11)
Deploying Mermaid [β](https://mermaid.js.org/intro/#deploying-mermaid)
-----------------------------------------------------------------------
To Deploy Mermaid:
1. You will need to install node v16, which would have npm
2. Install mermaid
* NPM: `npm i mermaid`
* Yarn: `yarn add mermaid`
* Pnpm: `pnpm add mermaid`
### [Mermaid API](https://mermaid.js.org/config/setup/README.html)
: [β](https://mermaid.js.org/intro/#mermaid-api)
**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
html
**Doing so commands the mermaid parser to look for the `
` or `
` tags with `class="mermaid"`. From these tags, mermaid tries to read the diagram/chart definitions and render them into SVG charts.**
**Examples can be found in** [Other examples](https://mermaid.js.org/syntax/examples.html)
Sibling projects [β](https://mermaid.js.org/intro/#sibling-projects)
---------------------------------------------------------------------
* [Mermaid Live Editor](https://github.com/mermaid-js/mermaid-live-editor)
* [Mermaid CLI](https://github.com/mermaid-js/mermaid-cli)
* [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny)
* [Mermaid Webpack Demo](https://github.com/mermaidjs/mermaid-webpack-demo)
* [Mermaid Parcel Demo](https://github.com/mermaidjs/mermaid-parcel-demo)
Request for Assistance [β](https://mermaid.js.org/intro/#request-for-assistance)
---------------------------------------------------------------------------------
Things are piling up and I have a hard time keeping up. It would be great if we could form a core team of developers to cooperate with the future development of mermaid.
As part of this team you would get write access to the repository and would represent the project when answering questions and issues.
Together we could continue the work with things like:
* Adding more types of diagrams like mindmaps, ert diagrams, etc.
* Improving existing diagrams
Don't hesitate to contact me if you want to get involved!
Contributors [β](https://mermaid.js.org/intro/#contributors)
-------------------------------------------------------------
[](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22)
[](https://github.com/mermaid-js/mermaid/graphs/contributors)
[](https://github.com/mermaid-js/mermaid/graphs/contributors)
Mermaid is a growing community and is always accepting new contributors. There's a lot of different ways to help out and we're always looking for extra hands! Look at [this issue](https://github.com/mermaid-js/mermaid/issues/866)
if you want to know where to start helping out.
Detailed information about how to contribute can be found in the [contribution guideline](https://mermaid.js.org/community/contributing.html)
.
### Requirements [β](https://mermaid.js.org/intro/#requirements)
* [volta](https://volta.sh/)
to manage node versions.
* [Node.js](https://nodejs.org/en/)
. `volta install node`
* [pnpm](https://pnpm.io/)
package manager. `volta install pnpm`
### Development Installation [β](https://mermaid.js.org/intro/#development-installation)
bash
git clone git@github.com:mermaid-js/mermaid.git
cd mermaid
# npx is required for first install as volta support for pnpm is not added yet.
npx pnpm install
pnpm test
### Lint [β](https://mermaid.js.org/intro/#lint)
sh
pnpm lint
We use [eslint](https://eslint.org/)
. We recommend you to install [editor plugins](https://eslint.org/docs/user-guide/integrations)
to get real time lint result.
### Test [β](https://mermaid.js.org/intro/#test)
sh
pnpm test
Manual test in browser: open `dist/index.html`
### Release [β](https://mermaid.js.org/intro/#release)
For those who have the permission to do so:
Update version number in `package.json`.
sh
npm publish
The above command generates files into the `dist` folder and publishes them to [npmjs.com](https://www.npmjs.com/)
.
Security and safe diagrams [β](https://mermaid.js.org/intro/#security-and-safe-diagrams)
-----------------------------------------------------------------------------------------
For public sites, it can be precarious to retrieve text from users on the internet, storing that content for presentation in a browser at a later stage. The reason is that the user content can contain embedded malicious scripts that will run when the data is presented. For Mermaid this is a risk, specially as mermaid diagrams contain many characters that are used in html which makes the standard sanitation unusable as it also breaks the diagrams. We still make an effort to sanitize the incoming code and keep refining the process but it is hard to guarantee that there are no loop holes.
As an extra level of security for sites with external users we are happy to introduce a new security level in which the diagram is rendered in a sandboxed iframe preventing JavaScript in the code from being executed. This is a great step forward for better security.
_Unfortunately you cannot have a cake and eat it at the same time which in this case means that some of the interactive functionality gets blocked along with the possible malicious code._
Reporting vulnerabilities [β](https://mermaid.js.org/intro/#reporting-vulnerabilities)
---------------------------------------------------------------------------------------
To report a vulnerability, please e-mail [security@mermaid.live](mailto:security@mermaid.live)
with a description of the issue, the steps you took to create the issue, affected versions, and if known, mitigations for the issue.
Appreciation [β](https://mermaid.js.org/intro/#appreciation)
-------------------------------------------------------------
A quick note from Knut Sveidqvist:
> _Many thanks to the [d3](https://d3js.org/)
> and [dagre-d3](https://github.com/cpettitt/dagre-d3)
> projects for providing the graphical layout and drawing libraries!_
>
> _Thanks also to the [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams)
> project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering._
>
> _Thank you to [Tyler Long](https://github.com/tylerlong)
> who has been a collaborator since April 2017._
>
> _Thank you to the ever-growing list of [contributors](https://github.com/mermaid-js/mermaid/graphs/contributors)
> that brought the project this far!_
* * *
_Mermaid was created by Knut Sveidqvist for easier documentation._
Opens in MermaidChart.com
---
# Getting Started | Mermaid
[Skip to content](https://mermaid.js.org/community/intro.html#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Getting Started [β](https://mermaid.js.org/community/intro.html#getting-started)
=================================================================================
So you want to help? That's great!
Here are a few things to get you started on the right path.
How can I help? [β](https://mermaid.js.org/community/intro.html#how-can-i-help)
--------------------------------------------------------------------------------
ContributingDevelopmentTestingManagementSolving issuesAdding new diagramsHandling pull requestsUpdating toolingVerification of fixed issuesRegression testing inconnection with releasesTesting pull requestsCoordinating the workClassification andmonitoring of incomingissues 8b2mq
Join the Development [β](https://mermaid.js.org/community/intro.html#join-the-development)
-------------------------------------------------------------------------------------------
TIP
**Check out our** [**detailed contribution guide**](https://mermaid.js.org/community/contributing.html)
.
Where to start:
* You could start getting some knowledge of the code base by working on [these "good first issues"](https://github.com/mermaid-js/mermaid/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+label%3A%22Good+first+issue%21%22+)
.
* You could jump right in and help us fix any of [these bugs](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Type%3A+Bug+%2F+Error%22++label%3A%22Contributor+needed%22+)
!
* You could help write and [improve the documentation](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Documentation%22)
.
* You could work on a new feature! [These](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Area%3A+Development%22+label%3A%22Type%3A+Enhancement%22+label%3A%22Status%3A+Approved%22+)
are some ideas!
* You could confirm the bugs in [these issues](https://github.com/mermaid-js/mermaid/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Triage%22++label%3A%22Type%3A+Bug+%2F+Error%22)
.
[You can join our Discord server if you want closer contact!](https://discord.gg/sKeNQX4Wtj)
A Question Or a Suggestion? [β](https://mermaid.js.org/community/intro.html#a-question-or-a-suggestion)
--------------------------------------------------------------------------------------------------------
TIP
**Have a look at** [**how to open an issue**](https://mermaid.js.org/community/questions-and-suggestions.html)
.
If you have faced a vulnerability [report it to us](https://mermaid.js.org/community/security.html)
.
Last Words [β](https://mermaid.js.org/community/intro.html#last-words)
-----------------------------------------------------------------------
Don't get daunted if it is hard in the beginning. We have a great community with only encouraging words. So, if you get stuck, ask for help and hints in the Slack forum. If you want to show off something good, show it off there.
[You can join our Discord server if you want closer contact!](https://discord.gg/sKeNQX4Wtj)
Opens in MermaidChart.com
---
# Announcements | Mermaid
[Skip to content](https://mermaid.js.org/news/announcements.html#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Announcements [β](https://mermaid.js.org/news/announcements.html#announcements)
================================================================================
π Exciting News from Mermaid Chart! π [β](https://mermaid.js.org/news/announcements.html#%F0%9F%9A%80-exciting-news-from-mermaid-chart-%F0%9F%9A%80)
-------------------------------------------------------------------------------------------------------------------------------------------------------
We're thrilled to announce that Mermaid Chart has successfully raised $7.5 million in Seed funding! π This achievement marks the beginning of a new era for Mermaid and Mermaid Chart.
**Why It Matters for Mermaid Chart:**
* **Empowering Collaboration**: Our tools are designed to enable faster, more efficient team collaboration across any distance, leveraging the best of text, voice, and automation.
* **Opening New Doors**: Mermaid AI and our Visual Editor are breaking down barriers, making sophisticated diagramming accessible to everyone, not just software engineers.
* **Looking Forward**: We're not stopping here! Expect groundbreaking features like automated documentation tools, advanced AI diagramming, and high-security on-premise solutions.
**Why It Matters for Mermaid JS:**
* **Continued support from Mermaid Chart**: At Mermaid Chart, we value our still-growing Mermaid JS roots. As such, we have funneled back development and support to the project. Thanks to the successful seed round, we can continue to ramp up these efforts.
We are incredibly excited about the future and are grateful to the community, our team, and our investors for being part of this journey. Together, we're not just creating diagrams; we're designing the future of collaboration.
π Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises)
.
Thank you for being part of our story. Here's to creating, innovating, and collaborating on a global scale!
Knut Sveidqvist π§ββοΈβ¨
Mermaid Chart's Visual Editor for Flowcharts and Sequence diagrams [β](https://mermaid.js.org/news/announcements.html#mermaid-chart-s-visual-editor-for-flowcharts-and-sequence-diagrams)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The Mermaid Chart team is excited to introduce a new Visual Editor for Flowcharts and Sequence diagrams, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
Learn more:
* Visual Editor For Flowcharts
* [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
* [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
* Visual Editor For Sequence diagrams
* [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
* [Demo video](https://youtu.be/imc2u5_N6Dc)
π Blog posts [β](https://mermaid.js.org/news/announcements.html#%F0%9F%93%96-blog-posts)
------------------------------------------------------------------------------------------
Visit our [Blog](https://mermaid.js.org/news/blog.html)
to see the latest blog posts.
Opens in MermaidChart.com
---
# Integrations | Mermaid
[Skip to content](https://mermaid.js.org/ecosystem/integrations-community.html#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Integrations [β](https://mermaid.js.org/ecosystem/integrations-community.html#integrations)
============================================================================================
Official integration [β](https://mermaid.js.org/ecosystem/integrations-community.html#official-integration)
------------------------------------------------------------------------------------------------------------
### Mermaid Chart [β](https://mermaid.js.org/ecosystem/integrations-community.html#mermaid-chart)
Mermaid Chart is built by the team behind Mermaid JS.
For more details, visit the [Mermaid Chart page](https://mermaid.js.org/ecosystem/mermaid-chart.html)
, or visit the [Mermaid Chart website](https://www.mermaidchart.com/)
.
Community integrations [β](https://mermaid.js.org/ecosystem/integrations-community.html#community-integrations)
----------------------------------------------------------------------------------------------------------------
We're excited about the growth of the Mermaid community, and the number of plugins and integrations that have been created by the community.
See the list below of community plugins and integrations created with Mermaid.
INFO
A β indicates Native support for Mermaid on the respective platform.
To add an integration to this list, see the [Integrations - create page](https://mermaid.js.org/ecosystem/integrations-create.html)
.
### Productivity tools [β](https://mermaid.js.org/ecosystem/integrations-community.html#productivity-tools)
* [Atlassian Products](https://www.atlassian.com/)
* [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
* [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
* [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
* [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
* [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
* [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
* [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
* [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
* [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
* [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
* [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
* [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
* [Mermaid plus for Confluence](https://marketplace.atlassian.com/apps/1236814/mermaid-plus-for-confluence?hosting=cloud&tab=overview)
* [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page)
β
* [Deepdwn](https://billiam.itch.io/deepdwn)
β
* [Doctave](https://www.doctave.com/)
β
* [Mermaid in Markdown code blocks](https://docs.doctave.com/components/mermaid)
β
* [Forgejo](https://forgejo.org/)
β
* [GitBook](https://gitbook.com/)
* [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
* [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
* [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
* [Gitea](https://gitea.io/)
β
* [GitHub](https://github.com/)
β
* [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)
β
* [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
* [GitHub Writer](https://github.com/ckeditor/github-writer)
* [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
* [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts)
β
* [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
* [MonsterWriter](https://www.monsterwriter.com/)
β
* [Joplin](https://joplinapp.org/)
β
* [LiveBook](https://livebook.dev/)
β
* [Slidev](https://sli.dev/)
β
* [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs)
β
* [Mermaid Flow Visual Editor](https://www.mermaidflow.app/)
β
* [Mermerd](https://github.com/KarnerTh/mermerd)
* [Slab](https://slab.com/)
β
* [Swimm](https://docs.swimm.io/features/diagrams-and-charts)
β
* [NotesHub](https://noteshub.app/)
β
* [Notion](https://notion.so/)
β
* [Observable](https://observablehq.com/@observablehq/mermaid)
β
* [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram)
β
* [Outline](https://docs.getoutline.com/s/guide/doc/diagrams-KQiKoT4wzK)
β
* [Redmine](https://redmine.org/)
* [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
* [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
* [redmine-mermaid](https://github.com/styz/redmine_mermaid)
* Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
* [Microsoft Loop](https://loop.cloud.microsoft/)
β
### LLM integrations [β](https://mermaid.js.org/ecosystem/integrations-community.html#llm-integrations)
LLM integrations to create mermaid diagrams using AI from text descriptions.
* [HueHive - Create mermaid diagrams with text](https://huehive.co/tools/diagrams)
### CRM/ERP [β](https://mermaid.js.org/ecosystem/integrations-community.html#crm-erp)
Customer Relationship Management/Enterprise Resource Planning
* [coreBOS](https://blog.corebos.org/blog/december2019)
### Blogging [β](https://mermaid.js.org/ecosystem/integrations-community.html#blogging)
Blogging frameworks and platforms
* [Hexo](https://hexo.io/)
* [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
* [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
* [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
* [Nextra](https://nextra.site/)
* [Mermaid](https://nextra.site/docs/guide/mermaid)
* [WordPress](https://wordpress.org/)
* [MerPRess](https://wordpress.org/plugins/merpress/)
### CMS/ECM [β](https://mermaid.js.org/ecosystem/integrations-community.html#cms-ecm)
Content Management Systems/Enterprise Content Management
* [ApostropheCMS](https://apostrophecms.com/)
* [Extension for Mermaid.js](https://github.com/BoDonkey/mermaid-extension)
* [Drupal](https://drupal.org/)
* [Mermaid Diagram Field module](https://www.drupal.org/project/mermaid_diagram_field)
* [Grav CMS](https://getgrav.org/)
* [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
* [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
* [Tiki](https://tiki.org/)
* [Tracker Entity Relationship Diagram](https://doc.tiki.org/Tracker-Entity-Relationship-Diagram)
* [VitePress](https://vitepress.vuejs.org/)
* [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
* [VuePress](https://vuepress.vuejs.org/)
* [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
### Communication [β](https://mermaid.js.org/ecosystem/integrations-community.html#communication)
Communication tools and platforms
* [Discourse](https://discourse.org/)
* [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
* [Mattermost](https://mattermost.com/)
* [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
* [NodeBB](https://nodebb.org/)
* [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
* [phpBB](https://phpbb.com/)
* [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
* [Slack](https://slack.com/)
* [Mermaid Preview](https://mermaid-preview.com/)
### Wikis [β](https://mermaid.js.org/ecosystem/integrations-community.html#wikis)
* [DokuWiki](https://dokuwiki.org/)
* [ComboStrap](https://combostrap.com/utility/create-diagram-with-mermaid-vh3ab9yj)
* [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
* [Foswiki](https://foswiki.org/)
* [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
* [MediaWiki](https://www.mediawiki.org/)
* [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
* [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
* [PmWiki](https://www.pmwiki.org/)
* [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
* [Semantic Media Wiki](https://www.semantic-mediawiki.org/)
* [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
* [TiddlyWiki](https://tiddlywiki.com/)
* [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
* [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)
### Editor Plugins [β](https://mermaid.js.org/ecosystem/integrations-community.html#editor-plugins)
* Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/)
)_
* [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
* [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
* [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
* [Astah](https://astah.net/)
* [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
* [Brackets](https://brackets.io/)
* [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
* [CKEditor](https://github.com/ckeditor/ckeditor5)
* [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
* [Draw.io](https://draw.io/)
* [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
* [GNU Emacs](https://www.gnu.org/software/emacs/)
* [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
* [Org-Mode integration](https://github.com/arnm/ob-mermaid)
* [GNU Nano](https://www.nano-editor.org/)
* [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
* [Google docs](https://docs.google.com/)
* [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
* [Inkdrop](https://www.inkdrop.app/)
* [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
* [Light Table](http://lighttable.com/)
* [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
* [Markdown-It](https://github.com/markdown-it/markdown-it)
* [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
* [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
* [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
* [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
* [Podlite](https://github.com/zag/podlite-desktop)
* [\=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
* [Standard Notes](https://standardnotes.com/)
* [Mermaid Extension](https://github.com/nienow/sn-mermaid)
* [VS Code](https://code.visualstudio.com/)
* [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
* [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
* [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
* [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
* [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
* [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
* [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
* [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
* [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
* [Vim](https://www.vim.org/)
* [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
* [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
* [Zed](https://zed.dev/)
* [zed-mermaid](https://github.com/gabeidx/zed-mermaid)
### Document Generation [β](https://mermaid.js.org/ecosystem/integrations-community.html#document-generation)
* [Astro](https://astro.build/)
* [Adding diagrams to your Astro site with MermaidJS and Playwright](https://agramont.net/blog/diagraming-with-mermaidjs-astro/)
* [Codedoc](https://codedoc.cc/)
* [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
* [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid)
β
* [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams)
β
* [Gatsby](https://www.gatsbyjs.com/)
* [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
* [Jekyll](https://jekyllrb.com/)
* [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
* [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
* [JSDoc](https://jsdoc.app/)
* [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
* [Madness](https://madness.dannyb.co/)
* [mdBook](https://rust-lang.github.io/mdBook/index.html)
* [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
* [MkDocs](https://www.mkdocs.org/)
* [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
* [mkdocs-material](https://github.com/squidfunk/mkdocs-material)
, check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
* [Quarto](https://quarto.org/)
β
* [rehype](https://github.com/rehypejs/rehype)
* [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
* [remark](https://remark.js.org/)
* [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
* [Sphinx](https://www.sphinx-doc.org/en/master/)
* [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
* [Type Doc](https://typedoc.org/)
* [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
* [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
β
* [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/)
β
### Browser Extensions [β](https://mermaid.js.org/ecosystem/integrations-community.html#browser-extensions)
| Name | Chrome Web Store | Firefox Add-ons | Opera | Edge | Source/Repository |
| --- | --- | --- | --- | --- | --- |
| GitHub + Mermaid | \- | [π¦π](https://addons.mozilla.org/firefox/addon/github-mermaid/) | \- | \- | [ππ](https://github.com/BackMarket/github-mermaid-extension) |
| Asciidoctor Live Preview | [π‘π](https://chromewebstore.google.com/detail/asciidoctorjs-live-previe/iaalpfgpbocpdfblpnhhgllgbdbchmia) | \- | \- | [ππ](https://microsoftedge.microsoft.com/addons/detail/asciidoctorjs-live-previ/pefkelkanablhjdekgdahplkccnbdggd?hl=en-US) | \- |
| Diagram Tab | \- | \- | \- | \- | [ππ](https://github.com/khafast/diagramtab) |
| Markdown Diagrams | [π‘π](https://chromewebstore.google.com/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel) | [π¦π](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | \- | [ππ](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [ππ](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer | \- | [π¦π](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | \- | \- | [ππ](https://github.com/simov/markdown-viewer) |
| Extensions for Mermaid | \- | \- | [π΄π](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | \- | [ππ](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer | [π‘π](https://chromewebstore.google.com/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | \- | \- | \- | \- |
| Mermaid Diagrams | [π‘π](https://chromewebstore.google.com/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | \- | \- | \- | \- |
| Monkeys | [π‘π](https://chromewebstore.google.com/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | \- | \- | \- | \- |
| Mermaid Previewer | [π‘π](https://chromewebstore.google.com/detail/mermaid-previewer/oidjnlhbegipkcklbdfnbkikplpghfdl) | \- | \- | \- | \- |
### Other [β](https://mermaid.js.org/ecosystem/integrations-community.html#other)
* [Bisheng](https://www.npmjs.com/package/bisheng)
* [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
* [Blazorade Mermaid: Render Mermaid diagrams in Blazor applications](https://github.com/Blazorade/Blazorade-Mermaid/wiki)
* [Codemia: A tool to practice system design problems](https://codemia.io/)
β
* [ExDoc](https://github.com/elixir-lang/ex_doc)
* [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
* [MarkChart: Preview Mermaid diagrams on macOS](https://markchart.app/)
* [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
* [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
* [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io/)
β
* [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
* [Reveal.js](https://github.com/hakimel/reveal.js)
* [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
* [Reveal CK](https://github.com/jedcn/reveal-ck)
* [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
* [Vitepress Plugin](https://github.com/sametcn99/vitepress-mermaid-renderer)
Opens in MermaidChart.com
---
# Tutorials | Mermaid
[Skip to content](https://mermaid.js.org/ecosystem/tutorials.html#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Tutorials [β](https://mermaid.js.org/ecosystem/tutorials.html#tutorials)
=========================================================================
This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.**
For most purposes, you can use the [Live Editor](https://mermaid.live/)
, to quickly and easily render a diagram.
Live-Editor Tutorials [β](https://mermaid.js.org/ecosystem/tutorials.html#live-editor-tutorials)
-------------------------------------------------------------------------------------------------
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
[Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA)
[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)
[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)
[World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s)
[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)
Mermaid with OpenAI [β](https://mermaid.js.org/ecosystem/tutorials.html#mermaid-with-openai)
---------------------------------------------------------------------------------------------
[Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff)
, [Demo:](https://databutton.com/v/jk9vrghc)
Mermaid with HTML [β](https://mermaid.js.org/ecosystem/tutorials.html#mermaid-with-html)
-----------------------------------------------------------------------------------------
Examples are provided in [Getting Started](https://mermaid.js.org/intro/getting-started.html)
**CodePen Examples:**
[https://codepen.io/CarlBoneri/pen/BQwZzq](https://codepen.io/CarlBoneri/pen/BQwZzq)
[https://codepen.io/tdkn/pen/vZxQzd](https://codepen.io/tdkn/pen/vZxQzd)
[https://codepen.io/janzeteachesit/pen/OWWZKN](https://codepen.io/janzeteachesit/pen/OWWZKN)
Mermaid with Text Area [β](https://mermaid.js.org/ecosystem/tutorials.html#mermaid-with-text-area)
---------------------------------------------------------------------------------------------------
[https://codepen.io/Ryuno-Ki/pen/LNxwgR](https://codepen.io/Ryuno-Ki/pen/LNxwgR)
Mermaid in open source docs [β](https://mermaid.js.org/ecosystem/tutorials.html#mermaid-in-open-source-docs)
-------------------------------------------------------------------------------------------------------------
[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
Jupyter / Python Integration with mermaid-js [β](https://mermaid.js.org/ecosystem/tutorials.html#jupyter-python-integration-with-mermaid-js)
---------------------------------------------------------------------------------------------------------------------------------------------
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as _.png_ image with the stated resolution (in this example, `dpi=1200`).
python
import base64
import io, requests
from IPython.display import Image, display
from PIL import Image as im
import matplotlib.pyplot as plt
def mm(graph):
graphbytes = graph.encode("utf8")
base64_bytes = base64.urlsafe_b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)
plt.axis('off') # allow to hide axis
plt.savefig('image.png', dpi=1200)
mm("""
graph LR;
A--> B & C & D
B--> A & E
C--> A & E
D--> A & E
E--> B & C & D
""")
**Output**
Opens in MermaidChart.com
---
# Mermaid User Guide | Mermaid
[Skip to content](https://mermaid.js.org/intro/getting-started.html#VPContent)
On this page
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Mermaid User Guide [β](https://mermaid.js.org/intro/getting-started.html#mermaid-user-guide)
=============================================================================================
Mermaid is composed of three parts [β](https://mermaid.js.org/intro/getting-started.html#mermaid-is-composed-of-three-parts)
-----------------------------------------------------------------------------------------------------------------------------
1. Deployment
2. Syntax
3. Configuration
This section talks about the different ways to **deploy** Mermaid.
If you are a beginner:
* Check out the [Diagram Syntax](https://mermaid.js.org/intro/syntax-reference.html)
page
* Check out the [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html)
page
Ways to use Mermaid [β](https://mermaid.js.org/intro/getting-started.html#ways-to-use-mermaid)
-----------------------------------------------------------------------------------------------
1. [Using the Mermaid Live Editor](https://mermaid.js.org/intro/getting-started.html#_1-using-the-mermaid-live-editor)
2. [Using the Mermaid Chart Editor](https://mermaid.js.org/intro/getting-started.html#_2-using-the-mermaid-chart-editor)
3. [Using Mermaid Plugins and Integrations](https://mermaid.js.org/intro/getting-started.html#_3-using-mermaid-plugins)
4. [Calling the Mermaid JavaScript API](https://mermaid.js.org/intro/getting-started.html#_4-calling-the-mermaid-javascript-api)
5. [Adding Mermaid as a dependency](https://mermaid.js.org/intro/getting-started.html#_5-adding-mermaid-as-a-dependency)
To learn more, visit the [Usage](https://mermaid.js.org/config/usage.html)
page.
1\. Using the Mermaid Live Editor [β](https://mermaid.js.org/intro/getting-started.html#_1-using-the-mermaid-live-editor)
--------------------------------------------------------------------------------------------------------------------------
Available at the [Mermaid Live Editor](https://mermaid.live/)
website.
### Features [β](https://mermaid.js.org/intro/getting-started.html#features)
#### β’ Diagram Code [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-diagram-code)
In the `Code` panel, write or edit Mermaid code, and instantly `Preview` the rendered result in the diagram panel.
Here is an example of Mermaid code and its rendered result:
##### Code:
mermaid
graph TD
A[Enter Chart Definition] --> B(Preview)
B --> C{decide}
C --> D[Keep]
C --> E[Edit Definition]
E --> B
D --> F[Save Image and Code]
F --> B
Ctrl + Enter|Run βΆ
#### β’ Configurations [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-configurations)
Configuration options are available in the `Configuration` panel. The options are applied to the diagram in the `Preview` panel.
To learn more, visit the [Configuration Reference](https://mermaid.js.org/config/setup/README.html)
page
#### β’ Editing History [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-editing-history)
Your code will be autosaved and appear in the `Timeline` tab of the `History` section. Edits are saved every minute and only the last 30 edits are viewable.
Alternatively, you can manually save code by clicking on the `Save` icon from the `History` section.
INFO
History is stored in the browser storage only.
#### β’ Saving a diagram [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-saving-a-diagram)
There are multiple ways of saving your diagram from the `Actions` section:
* export PNG
* export SVG
* export as Markdown
#### β’ Editing your diagrams [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-editing-your-diagrams)
To edit your diagram, you can copy paste existing Mermaid diagram code into the `Code` section of the `Live Editor`.
Or:
* create a new diagram from scratch
* use a Sample Diagram from the `Sample Diagrams` section
#### β’ Loading from Gists [β](https://mermaid.js.org/intro/getting-started.html#%E2%80%A2-loading-from-gists)
The Gist you create should have a `code.mmd` file and optionally a `config.json`, similar to this [example](https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
.
INFO
To learn about Gists, visit the GitHub documentation page on [Creating gists](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists)
.
Once you have created a Gist, copy paste the Gist URL into the respective field in the `Actions` section and click on the `Load Gist` button.
Here is an example of a Gist being loaded into the Editor:
[https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a](https://mermaid.live/edit?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
And, here is the diagram view from the above example:
[https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a](https://mermaid.live/view?gist=https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a)
2\. Using the Mermaid Chart Editor [β](https://mermaid.js.org/intro/getting-started.html#_2-using-the-mermaid-chart-editor)
----------------------------------------------------------------------------------------------------------------------------
Available at the [Mermaid Chart](https://www.mermaidchart.com/)
website.
Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
Features include:
* AI diagramming
* Collaboration & multi-user editing
* Storage
* and more
To learn more, visit the [Mermaid Chart page](https://mermaid.js.org/ecosystem/mermaid-chart.html)
in the Ecosystem section of the documentation.
Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up)
to sign up for a Free account.
3\. Using Mermaid Plugins [β](https://mermaid.js.org/intro/getting-started.html#_3-using-mermaid-plugins)
----------------------------------------------------------------------------------------------------------
### Mermaid Plugins [β](https://mermaid.js.org/intro/getting-started.html#mermaid-plugins)
You can generate Mermaid diagrams from within popular applications using plug-ins.
For a list of Mermaid Plugins and Integrations, visit the [Integrations page](https://mermaid.js.org/ecosystem/integrations-community.html)
.
### Mermaid Chart Plugins [β](https://mermaid.js.org/intro/getting-started.html#mermaid-chart-plugins)
Mermaid Chart plugins are available for:
* [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
* [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
* [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
* [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
* [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins)
page.
### Native Mermaid Support [β](https://mermaid.js.org/intro/getting-started.html#native-mermaid-support)
For apps that support markdown (e.g. [GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams)
and [GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/)
), you can add Mermaid diagrams by making a `mermaid` code block.
markdown
The following code-block will be rendered as a Mermaid diagram:
```mermaid
flowchart LR
A --> B
```
4\. Calling the Mermaid JavaScript API [β](https://mermaid.js.org/intro/getting-started.html#_4-calling-the-mermaid-javascript-api)
------------------------------------------------------------------------------------------------------------------------------------
This method can be used with any common web server like `Apache`, `IIS`, `Nginx`, and `Node Express`.
You will also need a text editing tool like `Notepad++` to generate an `html` file. It is then deployed by a web browser, i.e. `Firefox`, `Chrome`, `Safari`.
INFO
Internet Explorer is not supported.
The API works by pulling rendering instructions from the source `mermaid.js` in order to render diagrams on the page.
### Requirements for the Mermaid API [β](https://mermaid.js.org/intro/getting-started.html#requirements-for-the-mermaid-api)
When writing the `html` file, we give two instructions inside the `html code` to the `web browser`:
a. The Mermaid code for the diagram we want to create.
b. The importing of the Mermaid library through the `mermaid.esm.mjs` or `mermaid.esm.min.mjs`, and the `mermaid.initialize()` call, which dictates the appearance of diagrams and also starts the rendering process.
#### Examples [β](https://mermaid.js.org/intro/getting-started.html#examples)
* This is an example of an embedded Mermaid diagram definition inside a `
`:
html
Here is a mermaid diagram:
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]
INFO
Every Mermaid chart/graph/diagram definition should have separate `
` tags.
* This is an example of a Mermaid import and the `mermaid.initialize()` call.
INFO
A `mermaid.initialize()` call takes all the definitions contained within `
` tags and renders them into diagrams.
html
INFO
Rendering in Mermaid is initialized by the `mermaid.initialize()` call. However, doing the opposite lets you control when it starts looking for `
` tags inside the web page with `mermaid.initialize()`. This is useful when you think that not all `
` tags may have loaded on the execution of `mermaid.esm.min.mjs` file.
`startOnLoad` is one of the parameters that can be defined by `mermaid.initialize()`
| Parameter | Description | Type | Values |
| --- | --- | --- | --- |
| startOnLoad | Toggle for Rendering upon loading | Boolean | true, false |
In this example, the `mermaidAPI` is being called through the `CDN`:
html
Here is one mermaid diagram:
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
And here is another:
graph TD
A[Client] -->|tcp_123| B
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
In this example, `mermaid.js` is referenced in `src` as a separate JavaScript file:
html
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
5\. Adding Mermaid as a dependency [β](https://mermaid.js.org/intro/getting-started.html#_5-adding-mermaid-as-a-dependency)
----------------------------------------------------------------------------------------------------------------------------
Below are the steps for adding Mermaid as a dependency:
1. Install `node v16`
INFO
To learn more about downloading and installing `Node.js` and `npm`, visit the [npm Docs website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
.
1. Install `yarn` using `npm` with this command:
`npm install -g yarn`
2. After yarn installs, enter this command:
`yarn add mermaid`
3. To add Mermaid as a dev dependency, enter this command:
`yarn add --dev mermaid`
Closing note [β](https://mermaid.js.org/intro/getting-started.html#closing-note)
---------------------------------------------------------------------------------
INFO
Comments from Knut Sveidqvist, creator of Mermaid:
* In early versions of Mermaid, the `
The tooltip text is surrounded in double quotes. The styles of the tooltip are set by the class `.mermaidTooltip`.
##### Code:
mermaid
Ctrl + Enter|Run βΆ
> **Success** The tooltip functionality and the ability to link to urls are available from version 0.5.2.
?> Due to limitations with how Docsify handles JavaScript callback functions, an alternate working demo for the above code can be viewed at [this jsfiddle](https://jsfiddle.net/yk4h7qou/2/)
.
Links are opened in the same browser tab/window by default. It is possible to change this by adding a link target to the click definition (`_self`, `_blank`, `_parent` and `_top` are supported):
##### Code:
mermaid
Ctrl + Enter|Run βΆ
Beginner's tipβa full example using interactive links in a html context:
html
flowchart LR
A-->B
B-->C
C-->D
click A callback "Tooltip"
click B "https://www.github.com" "This is a link"
click C call callback() "Tooltip"
click D href "https://www.github.com" "This is a link"
### Comments [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#comments)
Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
##### Code:
mermaid
Ctrl + Enter|Run βΆ
Styling and classes [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#styling-and-classes)
----------------------------------------------------------------------------------------------------------------------------------
### Styling links [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#styling-links)
It is possible to style links. For instance, you might want to style a link that is going backwards in the flow. As links have no ids in the same way as nodes, some other way of deciding what style the links should be attached to is required. Instead of ids, the order number of when the link was defined in the graph is used, or use default to apply to all links. In the example below the style defined in the linkStyle statement will belong to the fourth link in the graph:
linkStyle 3 stroke:#ff3,stroke-width:4px,color:red;
It is also possible to add style to multiple links in a single statement, by separating link numbers with commas:
linkStyle 1,2,7 color:blue;
### Styling line curves [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#styling-line-curves)
It is possible to style the type of curve used for lines between items, if the default method does not meet your needs. Available curve styles include `basis`, `bumpX`, `bumpY`, `cardinal`, `catmullRom`, `linear`, `monotoneX`, `monotoneY`, `natural`, `step`, `stepAfter`, and `stepBefore`.
In this example, a left-to-right graph uses the `stepBefore` curve style:
%%{ init: { 'flowchart': { 'curve': 'stepBefore' } } }%%
graph LR
For a full list of available curves, including an explanation of custom curves, refer to the [Shapes](https://d3js.org/d3-shape/curve)
documentation in the [d3-shape](https://github.com/d3/d3-shape/)
project.
### Styling a node [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#styling-a-node)
It is possible to apply specific styles such as a thicker border or a different background color to a node.
##### Code:
mermaid
Ctrl + Enter|Run βΆ
#### Classes [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#classes)
More convenient than defining the style every time is to define a class of styles and attach this class to the nodes that should have a different look.
A class definition looks like the example below:
classDef className fill:#f9f,stroke:#333,stroke-width:4px;
Also, it is possible to define style to multiple classes in one statement:
classDef firstClassName,secondClassName font-size:12pt;
Attachment of a class to a node is done as per below:
class nodeId1 className;
It is also possible to attach a class to a list of nodes in one statement:
class nodeId1,nodeId2 className;
A shorter form of adding a class is to attach the classname to the node using the `:::`operator as per below:
##### Code:
mermaid
Ctrl + Enter|Run βΆ
This form can be used when declaring multiple links between nodes:
##### Code:
mermaid
Ctrl + Enter|Run βΆ
### CSS classes [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#css-classes)
It is also possible to predefine classes in CSS styles that can be applied from the graph definition as in the example below:
**Example style**
html
**Example definition**
##### Code:
mermaid
Ctrl + Enter|Run βΆ
### Default class [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#default-class)
If a class is named default it will be assigned to all classes without specific class definitions.
classDef default fill:#f9f,stroke:#333,stroke-width:4px;
Basic support for fontawesome [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#basic-support-for-fontawesome)
------------------------------------------------------------------------------------------------------------------------------------------------------
It is possible to add icons from fontawesome.
The icons are accessed via the syntax fa:#icon class name#.
##### Code:
mermaid
Ctrl + Enter|Run βΆ
There are two ways to display these FontAwesome icons:
### Register FontAwesome icon packs (v11.7.0+) [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#register-fontawesome-icon-packs-v11-7-0)
You can register your own FontAwesome icon pack following the ["Registering icon packs" instructions](https://mermaid.js.org/config/icons.html)
.
Supported prefixes: `fa`, `fab`, `fas`, `far`, `fal`, `fad`.
INFO
Note that it will fall back to FontAwesome CSS if FontAwesome packs are not registered.
### Register FontAwesome CSS [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#register-fontawesome-css)
Mermaid supports Font Awesome if the CSS is included on the website. Mermaid does not have any restriction on the version of Font Awesome that can be used.
Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start)
on how to include it in your website.
Adding this snippet in the `` would add support for Font Awesome v6.5.1
html
### Custom icons [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#custom-icons)
It is possible to use custom icons served from Font Awesome as long as the website imports the corresponding kit.
Note that this is currently a paid feature from Font Awesome.
For custom icons, you need to use the `fak` prefix.
**Example**
flowchart TD
B[fa:fa-twitter] %% standard icon
B-->E(fak:fa-custom-icon-name) %% custom icon
And trying to render it
##### Code:
mermaid
Ctrl + Enter|Run βΆ
Graph declarations with spaces between vertices and link and without semicolon [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#graph-declarations-with-spaces-between-vertices-and-link-and-without-semicolon)
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
* In graph declarations, the statements also can now end without a semicolon. After release 0.2.16, ending a graph statement with semicolon is just optional. So the below graph declaration is also valid along with the old declarations of the graph.
* A single space is allowed between vertices and the link. However there should not be any space between a vertex and its text and a link and its text. The old syntax of graph declaration will also work and hence this new feature is optional and is introduced to improve readability.
Below is the new declaration of the graph edges which is also valid along with the old declaration of the graph edges.
##### Code:
mermaid
Ctrl + Enter|Run βΆ
Configuration [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#configuration)
----------------------------------------------------------------------------------------------------------------------
### Renderer [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#renderer)
The layout of the diagram is done with the renderer. The default renderer is dagre.
Starting with Mermaid version 9.4, you can use an alternate renderer named elk. The elk renderer is better for larger and/or more complex diagrams.
The _elk_ renderer is an experimental feature. You can change the renderer to elk by adding this directive:
config:
flowchart:
defaultRenderer: "elk"
INFO
Note that the site needs to use mermaid version 9.4+ for this to work and have this featured enabled in the lazy-loading configuration.
### Width [β](https://mermaid.js.org/syntax/flowchart.html?id=special-characters-that-break-syntax#width)
It is possible to adjust the width of the rendered flowchart.
This is done by defining **mermaid.flowchartConfig** or by the CLI to use a JSON file with the configuration. How to use the CLI is described in the mermaidCLI page. mermaid.flowchartConfig can be set to a JSON string with config parameters or the corresponding object.
javascript
mermaid.flowchartConfig = {
width: 100%
}
Opens in MermaidChart.com
---
# Usage | Mermaid
[Skip to content](https://mermaid.js.org/config/usage.html?id=usage#VPContent)
Return to top
[Customize your layout and design in Mermaid Chartβs visual editor! Try now](https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor)
Usage [β](https://mermaid.js.org/config/usage.html?id=usage#usage)
===================================================================
Mermaid is a JavaScript tool that makes use of a Markdown based syntax to render customizable diagrams, charts and visualizations.
Diagrams can be re-rendered/modified by modifying their descriptions.
### CDN [β](https://mermaid.js.org/config/usage.html?id=usage#cdn)
[https://www.jsdelivr.com/package/npm/mermaid](https://www.jsdelivr.com/package/npm/mermaid)
Please note that you can switch versions through the dropdown box at the top right.
Using mermaid [β](https://mermaid.js.org/config/usage.html?id=usage#using-mermaid)
-----------------------------------------------------------------------------------
For the majority of users, Using the [Live Editor](https://mermaid.live/)
would be sufficient, however you may also opt to deploy mermaid as a dependency or using the [Mermaid API](https://mermaid.js.org/config/setup/README.html)
.
We have compiled some Video [Tutorials](https://mermaid.js.org/ecosystem/tutorials.html)
on how to use the Mermaid Live Editor.
### Installing and Hosting Mermaid on a Webpage [β](https://mermaid.js.org/config/usage.html?id=usage#installing-and-hosting-mermaid-on-a-webpage)
**Using the npm package:**
Requirements:
* Node >= 16
bash
# NPM
npm install mermaid
# Yarn
yarn add mermaid
# PNPM
pnpm add mermaid
**Hosting mermaid on a web page:**
> Note: This topic is explored in greater depth in the [User Guide for Beginners](https://mermaid.js.org/intro/getting-started.html)
The easiest way to integrate mermaid on a web page requires two elements:
* A graph definition, inside `
` tags labeled `class=mermaid`.
Example:
html
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
* The mermaid js script. Added using a `script` tag as an ESM import.
Example:
html
**Following these directions, mermaid starts at page load and (when the page has loaded) it will locate the graph definitions inside the `pre` tags with `class="mermaid"` and return diagrams in SVG form, following given definitions.**
Simple full example: [β](https://mermaid.js.org/config/usage.html?id=usage#simple-full-example)
------------------------------------------------------------------------------------------------
html
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
Notes: [β](https://mermaid.js.org/config/usage.html?id=usage#notes)
--------------------------------------------------------------------
An id attribute is also added to mermaid tags without one.
Mermaid can load multiple diagrams, in the same page.
> Try it out, save this code as HTML and load it using any browser. (Except Internet Explorer, please don't use Internet Explorer.)
Tiny Mermaid [β](https://mermaid.js.org/config/usage.html?id=usage#tiny-mermaid)
---------------------------------------------------------------------------------
We offer a smaller version of Mermaid that's approximately half the size of the full library. This tiny version doesn't support Mindmap Diagrams, Architecture Diagrams, KaTeX rendering, or lazy loading.
If you need a more lightweight version without these features, you can use [Mermaid Tiny](https://github.com/mermaid-js/mermaid/tree/develop/packages/tiny)
.
Enabling Click Event and Tags in Nodes [β](https://mermaid.js.org/config/usage.html?id=usage#enabling-click-event-and-tags-in-nodes)
-------------------------------------------------------------------------------------------------------------------------------------
A `securityLevel` configuration has to first be cleared. `securityLevel` sets the level of trust for the parsed diagrams and limits click functionality. This was introduced in version 8.2 as a security improvement, aimed at preventing malicious use.
**It is the site owner's responsibility to discriminate between trustworthy and untrustworthy user-bases and we encourage the use of discretion.**
securityLevel [β](https://mermaid.js.org/config/usage.html?id=usage#securitylevel)
-----------------------------------------------------------------------------------
| Parameter | Description | Type | Required | Values |
| --- | --- | --- | --- | --- |
| securityLevel | Level of trust for parsed diagram | String | Optional | 'sandbox', 'strict', 'loose', 'antiscript' |
Values:
* **strict**: (**default**) HTML tags in the text are encoded and click functionality is disabled.
* **antiscript**: HTML tags in text are allowed (only script elements are removed) and click functionality is enabled.
* **loose**: HTML tags in text are allowed and click functionality is enabled.
* **sandbox**: With this security level, all rendering takes place in a sandboxed iframe. This prevents any JavaScript from running in the context. This may hinder interactive functionality of the diagram, like scripts, popups in the sequence diagram, links to other tabs or targets, etc.
INFO
This changes the default behaviour of mermaid so that after upgrade to 8.2, unless the `securityLevel` is not changed, tags in flowcharts are encoded as tags and clicking is disabled. **sandbox** security level is still in the beta version.
**If you are taking responsibility for the diagram source security you can set the `securityLevel` to a value of your choosing. This allows clicks and tags are allowed.**
**To change `securityLevel`, you have to call `mermaid.initialize`:**
javascript
mermaid.initialize({
securityLevel: 'loose',
});
### Labels out of bounds [β](https://mermaid.js.org/config/usage.html?id=usage#labels-out-of-bounds)
If you use dynamically loaded fonts that are loaded through CSS, such as fonts, mermaid should wait for the whole page to load (dom + assets, particularly the fonts file).
javascript
$(document).ready(function () {
mermaid.initialize();
});
Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds. The default integration in mermaid uses the window.load event to start rendering.
If your page has other fonts in its body those might be used instead of the mermaid font. Specifying the font in your styling is a workaround for this.
css
pre.mermaid {
font-family: 'trebuchet ms', verdana, arial;
}
### Using `mermaid.run` [β](https://mermaid.js.org/config/usage.html?id=usage#using-mermaid-run)
mermaid.run was added in v10 and is the preferred way of handling more complex integration. By default, `mermaid.run` will be called when the document is ready, rendering all elements with `class="mermaid"`.
You can customize that behavior by calling `await mermaid.run()`.
`mermaid.initialize({startOnLoad: false})` will prevent `mermaid.run` from being called automatically after load.
Render all elements with querySelector ".someOtherClass"
js
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
querySelector: '.someOtherClass',
});
Render all elements passed as an array
js
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
nodes: [document.getElementById('someId'), document.getElementById('anotherId')],
});
await mermaid.run({
nodes: document.querySelectorAll('.yetAnotherClass'),
});
Render all `.mermaid` elements while suppressing any error
js
mermaid.initialize({ startOnLoad: false });
await mermaid.run({
suppressErrors: true,
});
### Calling `mermaid.init` - Deprecated [β](https://mermaid.js.org/config/usage.html?id=usage#calling-mermaid-init-deprecated)
WARNING
mermaid.init is deprecated in v10 and will be removed in a future release. Please use mermaid.run instead.
By default, `mermaid.init` will be called when the document is ready, finding all elements with `class="mermaid"`. If you are adding content after mermaid is loaded, or otherwise need finer-grained control of this behavior, you can call `init` yourself with:
* a configuration object
* some nodes, as
* a node
* an array-like of nodes
* or W3C selector that will find your nodes
Example:
javascript
mermaid.init({ noteMargin: 10 }, '.someOtherClass');
Or with no config object, and a jQuery selection:
javascript
mermaid.init(undefined, $('#someId .yetAnotherClass'));
Usage with webpack [β](https://mermaid.js.org/config/usage.html?id=usage#usage-with-webpack)
---------------------------------------------------------------------------------------------
mermaid fully supports webpack. Here is a [working demo](https://github.com/mermaidjs/mermaid-webpack-demo)
.
API usage [β](https://mermaid.js.org/config/usage.html?id=usage#api-usage)
---------------------------------------------------------------------------
The main idea of the API is to be able to call a render function with the graph definition as a string. The render function will render the graph and call a callback with the resulting SVG code. With this approach it is up to the site creator to fetch the graph definition from the site (perhaps from a textarea), render it and place the graph somewhere in the site.
The example below shows an example of how this could be used. The example just logs the resulting SVG to the JavaScript console.
html
To determine the type of diagram present in a given text, you can utilize the `mermaid.detectType` function, as demonstrated in the example below.
html
### Binding events [β](https://mermaid.js.org/config/usage.html?id=usage#binding-events)
Sometimes the generated graph also has defined interactions like tooltip and click events. When using the API one must add those events after the graph has been inserted into the DOM.
The example code below is an extract of what mermaid does when using the API. The example shows how it is possible to bind events to an SVG when using the API for rendering.
javascript
// Example of using the bindFunctions
const drawDiagram = async function () {
element = document.querySelector('#graphDiv');
const graphDefinition = 'graph TB\na-->b';
const { svg, bindFunctions } = await mermaid.render('graphDiv', graphDefinition);
element.innerHTML = svg;
// This can also be written as `bindFunctions?.(element);` using the `?` shorthand.
if (bindFunctions) {
bindFunctions(element);
}
};
1. The graph is generated using the render call.
2. After generation the render function calls the provided callback function, in this case it's called insertSvg.
3. The callback function is called with two parameters, the SVG code of the generated graph and a function. This function binds events to the SVG **after** it is inserted into the DOM.
4. Insert the SVG code into the DOM for presentation.
5. Call the binding function that binds the events.
Example of a marked renderer [β](https://mermaid.js.org/config/usage.html?id=usage#example-of-a-marked-renderer)
-----------------------------------------------------------------------------------------------------------------
This is the renderer used for transforming the documentation from Markdown to html with mermaid diagrams in the html.
javascript
const renderer = new marked.Renderer();
renderer.code = function (code, language) {
if (code.match(/^sequenceDiagram/) || code.match(/^graph/)) {
return '
' + code + '
';
} else {
return '
' + code + '
';
}
};
Another example in CoffeeScript that also includes the mermaid script tag in the generated markup.
coffee
marked = require 'marked'
module.exports = (options) ->
hasMermaid = false
renderer = new marked.Renderer()
renderer.defaultCode = renderer.code
renderer.code = (code, language) ->
if language is 'mermaid'
html = ''
if not hasMermaid
hasMermaid = true
html += ''
html + '