search

mintlify / components

UI components for documentation made with React and TailwindCSS.
MIT License
79 stars 12 forks source link

Mermaid.js component #80

Open davidthor opened 1 year ago

davidthor commented 1 year ago

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 commented 1 year ago

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

brunonunes commented 1 year ago
  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 commented 1 year ago
  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!