Mermaid.js component

[davidthor]

Mermaid is an excellent, markdown-powered diagramming tool that allows authors to user journeys, flowcharts, class diagrams, and more directly from their own markdown codeblocks. Gitlab has integrated with mermaid to allow for the generation of charts in issue descriptions and comments, and our team uses it very often.

We'd love to see mermaid integrated into Mintlify, and added bonus if it automatically matches the theme colors and fonts from the rest of the documentation website. It would be a great way to easily integrate graph and flow chart features into more complex documentation that is otherwise hard to maintain.

https://mermaid.js.org/

[ghost]

Love this idea! We'll add it to our roadmap.

[brunonunes]

1. Go to https://mermaid.live
2. Create/edit the diagram
3. Click "Full Screen" in the upper right corner or copy the URL and replace "edit" with "view"
4. Enter this code in your page .mdx replacing <diagram-hash>

<iframe src="https://mermaid.live/view#pako:<diagram-hash>" className="w-full" height="500"></iframe>

To edit later, replace "view" with "edit" in the browser.

Tip from Mintlify team.

[Tautorn]

1. Go to https://mermaid.live
2. Create/edit the diagram
3. Click "Full Screen" in the upper right corner or copy the URL and replace "edit" with "view"
4. Enter this code in your page .mdx replacing <diagram-hash>

<iframe src="https://mermaid.live/view#pako:<diagram-hash>" className="w-full" height="500"></iframe>

To edit later, replace "view" with "edit" in the browser.

Tip from Mintlify team.

Works for me!