Diagrams

Diagrams can be rendered using Mermaid in a code block.

Use

The CMS directly supports editing Mermaid diagrams.

1. Click the Mermaid icon.
2. Enter the Markdown in the box.

Click Preview to view your diagram.

Example:

Note

Currently, zenUML diagrams are not supported and mind map diagrams may produce unusual behaviour. Not all diagram types can be previewed in the CMS.

For more information, refer to Mermaid in the TinaCMS documentation.

For information on theming Mermaid, refer to Diagrams in the Docusaurus documentation.

Related topics

• Math equations – Writing LaTeX math equations.
• MDX and React – Using React in docStatic Markdown documents with MDX.
• Create a doc – Create a Markdown document.
• Docs introduction – An introduction to docStatic docs.
• Styling and layout – A Docstatic site is a pre-rendered single-page React application. You can style it the way you style React apps.
• Upgrading – Upgrading Node.js modules.
• Advanced guides – Advanced docStatic guides.