Mermaid Editor
Mermaid Diagrams
Mermaid is a powerful diagramming tool that allows users to create stunning graphs using Markdown-inspired text. With Mermaid, you can effortlessly generate flowcharts, sequence diagrams, state diagrams, ER diagrams, user journey maps, Gantt charts, pie charts, requirement diagrams, Git graphs, C4 diagrams, mind maps, and timelines. Ideal for developers and project managers, Mermaid enhances documentation by enabling the creation of dynamic, text-based diagrams. For a deeper dive into Mermaid's capabilities and examples, explore the official website, where various samples are showcased to help you get started.
Mermaid Editor (Diagramming AI)
In Diagramming AI, diagrams generated in the "AI" tab are output as Mermaid Markdown code in the "Code" tab, where the diagrams are rendered.
Code
In the "Code" tab, you can input Mermaid Markdown code to edit diagrams in real-time.
Config
In the "Config" tab, you can change the style of the diagrams. Specific config options can be found in the official Mermaid js documentation. - Official Documentation Link: Mermaid.js Documentation
Diagramming AI's Editor feature includes the "Quick Edit" function, which simplifies configuration. Currently, this feature is available for flowcharts, sequence diagrams, ER diagrams, and Gantt charts. We continuously update and add support for more diagram types. The Quick Edit function allows you to adjust various settings such as diagram orientation, margins, and padding. Additionally, for flowcharts and sequence diagrams, you can customize colors.
Highlight Feature
In Diagramming AI, the Highlight feature is available for Mermaid flowcharts. This feature highlights the part of the diagram that corresponds to the cursor's position in the "Code" tab. This makes it easier to identify and edit specific parts of the diagram, enhancing the overall editing experience. We plan to update and add support for more diagram types in the future.
Note
The Note tab serves as a free text area where you can add comments or notes about the diagram. These notes do not affect the rendering of the diagram and are solely for your reference.
