Mermaid online editor: Difference between revisions

Jump to navigation Jump to search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
Convert Mermaid syntax to png (or other image files)
Convert Mermaid syntax to png (or other image files)


{{Drafting}}
{{LanguageSwitcher | content = [[Mermaid online editor | English]], [[Mermaid online editor in Mandarin | 漢字]] }}
 
== Why use Mermaid syntax ==
Why use Mermaid syntax instead of traditional drawing methods. Now you can ask AI to "use Mermaid syntax to draw XX flowchart" to conveniently generate Mermaid syntax.
 
The advantage of using Mermaid syntax to draw flowcharts is that '''it's text-based''', making it convenient to update. Then tools can be used to convert it into image files.


== List of Mermaid online editor ==
== List of Mermaid online editor ==
Line 11: Line 16:
* Comments: In addition to online editing: modifying shape forms, adding colors, you can also export Mermaid flowchart files in a handwritten font style {{Gd}}
* Comments: In addition to online editing: modifying shape forms, adding colors, you can also export Mermaid flowchart files in a handwritten font style {{Gd}}
* Example: [https://excalidraw.com/#json=Z9I2DD9Ex4v2Mold0Jfw5,oXVtnyGwvS5ZldqZw_dNdg link]
* Example: [https://excalidraw.com/#json=Z9I2DD9Ex4v2Mold0Jfw5,oXVtnyGwvS5ZldqZw_dNdg link]
* Limit: 1000 characters {{exclaim}}


[https://www.mermaidflow.app/editor Editor | Mermaid Flow]
[https://www.mermaidflow.app/editor Editor | Mermaid Flow]
Line 32: Line 38:
     style D fill:#f9f,stroke:#333,stroke-width:2px
     style D fill:#f9f,stroke:#333,stroke-width:2px
</pre>
</pre>
== Further readings ==
* Diagram Syntax | Mermaid https://mermaid.js.org/intro/syntax-reference.html


[[Category: Tool]]
[[Category: Tool]]

Navigation menu