{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"insert-mermaid-diagrams","__idx":0},"children":["Insert Mermaid diagrams"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"danger","name":"Deprecated docs"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The developer portal beta is ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/product-timelines"},"children":["approaching end of life"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use Realm and Reunite instead. Read the ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"/docs-legacy/developer-portal/migrate-from-legacy-portal"},"children":["migration guide"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can insert ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://mermaidjs.github.io/"},"children":["mermaid"]}," charts and diagrams directly into markdown. This allows you to adhere to the docs-as-code philosophy."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To insert a diagram, create a code block and specify the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mermaid"]}," language, like this example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"```mermaid\ngraph LR\n Start --> Stop\n```\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"an-example-of-a-graph","__idx":1},"children":["An example of a graph"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"graph LR\n Start --> Stop\n","diagramHtml":"

Start

Stop

","diagramHtmlDark":"

Start

Stop

"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"an-example-of-a-sequence-diagram","__idx":2},"children":["An example of a sequence diagram"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"```mermaid\nsequenceDiagram\n participant Alice\n participant Bob\n Alice->John: Hello John, how are you?\n loop Healthcheck\n John->John: Fight against hypochondria\n end\n Note right of John: Rational thoughts
prevail...\n John-->Alice: Great!\n John->Bob: How about you?\n Bob-->John: Jolly good!\n```\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Sequence:"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"sequenceDiagram\n participant Alice\n participant Bob\n Alice->John: Hello John, how are you?\n loop Healthcheck\n John->John: Fight against hypochondria\n end\n Note right of John: Rational thoughts
prevail...\n John-->Alice: Great!\n John->Bob: How about you?\n Bob-->John: Jolly good!\n","diagramHtml":"JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!","diagramHtmlDark":"JohnBobAliceJohnBobAliceloop[Healthcheck]Rational thoughts prevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"an-example-of-a-gantt-diagram","__idx":3},"children":["An example of a Gantt diagram"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"md","header":{"controls":{"copy":{}}},"source":"```mermaid\ngantt\n dateFormat YYYY-MM-DD\n title Adding GANTT diagram functionality to mermaid\n section A section\n Completed task :done, des1, 2014-01-06,2014-01-08\n Active task :active, des2, 2014-01-09, 3d\n Future task : des3, after des2, 5d\n Future task2 : des4, after des3, 5d\n section Critical tasks\n Completed task in the critical line :crit, done, 2014-01-06,24h\n Implement parser and jison :crit, done, after des1, 2d\n Create tests for parser :crit, active, 3d\n Future task in critical line :crit, 5d\n Create tests for renderer :2d\n Add to mermaid :1d\n```\n","lang":"md"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Gantt:"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"gantt\n dateFormat YYYY-MM-DD\n title Adding GANTT diagram functionality to mermaid\n section A section\n Completed task :done, des1, 2014-01-06,2014-01-08\n Active task :active, des2, 2014-01-09, 3d\n Future task : des3, after des2, 5d\n Future task2 : des4, after des3, 5d\n section Critical tasks\n Completed task in the critical line :crit, done, 2014-01-06,24h\n Implement parser and jison :crit, done, after des1, 2d\n Create tests for parser :crit, active, 3d\n Future task in critical line :crit, 5d\n Create tests for renderer :2d\n Add to mermaid :1d\n","diagramHtml":"2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid","diagramHtmlDark":"2014-01-072014-01-092014-01-112014-01-132014-01-152014-01-172014-01-192014-01-21Completed task Completed task in the critical line Implement parser and jison Active task Create tests for parser Future task Future task in critical line Future task2 Create tests for renderer Add to mermaid A sectionCritical tasksAdding GANTT diagram functionality to mermaid"},"children":[]}]},"frontmatter":{"seo":{"title":"Mermaid diagrams"},"excludeFromSearch":true},"tagList":["admonition","partial"],"title":"Mermaid diagrams","lastModified":"2025-05-28T16:01:32.000Z"}