{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/mermaid/","matchPath":"","result":{"data":{"markdownRemark":{"html":"

Mermaid diagrams

\n

You can insert mermaid charts and diagrams directly into markdown. This allows you to adhere to the docs-as-code philosophy. To insert a diagram, create a code block and specify the mermaid language.

\n

A live mermaid diagram editor can be helpful when writing diagrams.

\n
Dependencies

Mermaid requires heavy dependencies to render, so we offload that to a microservice we host in AWS.\nIf you do not want to send data to our microservice, do not use Mermaid diagrams.

\n

An example of a flowchart

\n

To see the flowchart, you can paste this onto the Markdown page.

\n
\n
Markdown --> Paths --> Mermaid --> ?\n\\\\`\\\\`\\\\``, `3637980635994253300`)\"\n >\n
Copy
\n
Copied
\n
\n 
```mermaid\ngraph LR\n    Install --> Markdown --> Paths --> Mermaid --> ?\n```
\n
\n

Edit the flowchart

\n

This training course won't cover the mermaid library in much depth.

\n

We will replace the ? in the flowchart with what's up next:

\n\n

Try to edit this page and replace the ? with TOC.

\n

Now, try to replace that with Table of contents.\nYou should see an error if you replaced it like this.

\n
\n
Markdown --> Paths --> Mermaid --> Table of contents\n\\\\`\\\\`\\\\`\n\nError: Parse error on line 2: ...> Mermaid --> Table of contents -----------------------^ Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', got 'ALPHA'`, `12385796617204804000`)\"\n >\n
Copy
\n
Copied
\n
\n 
```mermaid\ngraph LR\n    Install --> Markdown --> Paths --> Mermaid --> Table of contents\n```\n\nError: Parse error on line 2: ...> Mermaid --> Table of contents -----------------------^ Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', got 'ALPHA'
\n
\n

The space causes mermaid to error. Fix it using this escape technique.

\n
\n
Markdown --> Paths --> Mermaid --> TOC[Table of contents]\n\\\\`\\\\`\\\\``, `69676073115972930000`)\"\n >\n
Copy
\n
Copied
\n
\n 
```mermaid\ngraph LR\n    Install --> Markdown --> Paths --> Mermaid --> TOC[Table of contents]\n```
\n
\n

Extra credit

\n

You could spend a day trying all of the different kinds of mermaid diagrams.

\n

You could try to reproduce the diagram on Redocly's docs homepage.

","headings":[{"value":"Mermaid diagrams","depth":1},{"value":"An example of a flowchart","depth":2},{"value":"Edit the flowchart","depth":2},{"value":"Extra credit","depth":2}]},"contentItem":{"data":{"lastModified":"2023-03-21T02:46:22.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":false,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"9c6d38a3-058f-5a3f-9852-31040f0f3487__redocly content/developer-portal/mermaid/","seo":{"title":"Mermaid diagrams","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null,"siteUrl":null},"pageId":"developer-portal/mermaid.md","pageBaseUrl":"/developer-portal/mermaid","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"Mermaid diagrams","id":"mermaid-diagrams"},{"depth":2,"value":"An example of a flowchart","id":"an-example-of-a-flowchart"},{"depth":2,"value":"Edit the flowchart","id":"edit-the-flowchart"},{"depth":2,"value":"Extra credit","id":"extra-credit"}]},"data":{"title":"Mermaid diagrams"},"catalogInfo":null,"link":"/developer-portal/mermaid/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3240152602","3743992808","561138138"]}