15,063
edits
Mermaid online editor: Difference between revisions
Jump to navigation
Jump to search
→List of Mermaid online editor
m (Planetoid moved page Convert mermaid to image to Mermaid online editor) |
|||
| (7 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) | ||
{{ | {{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 == | |||
[https://mermaid.live/ Online FlowChart & Diagrams Editor - Mermaid Live Editor] | [https://mermaid.live/ Online FlowChart & Diagrams Editor - Mermaid Live Editor] | ||
* Output format: (1) Download image files png, svg, kroki or (2) Copy to clipboard | * Output format: (1) Download image files png, svg, kroki or (2) Copy to clipboard | ||
[https://excalidraw.com/ Excalidraw | Hand-drawn look & feel • Collaborative • Secure] | [https://excalidraw.com/ Excalidraw | Hand-drawn look & feel • Collaborative • Secure] | ||
* Output format: Copy png or svg to clipboard | * Output format: (1) Download image files png & svg (2) Copy png or svg to clipboard | ||
* 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 31: | 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]] | ||