Mermaid online editor: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
|||
| (12 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] | |||
* Output format: Download png, pdf & svg files | |||
== Example Mermaid syntax == | == Example Mermaid syntax == | ||
| Line 30: | 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]] | ||
Latest revision as of 14:05, 28 October 2025
Convert Mermaid syntax to png (or other image files)
Why use Mermaid syntax[edit]
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[edit]
Online FlowChart & Diagrams Editor - Mermaid Live Editor
- Output format: (1) Download image files png, svg, kroki or (2) Copy to clipboard
Excalidraw | Hand-drawn look & feel • Collaborative • Secure
- 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
- Example: link
- Limit: 1000 characters
- Output format: Download png, pdf & svg files
Example Mermaid syntax[edit]
Example Mermaid syntax of Triple point - Wikipedia
graph TD
A[Solid State Ice] -- Melting --> B[Liquid State Water]
B -- Freezing --> A
B -- Vaporization/Boiling --> C[Gas State Vapor]
C -- Condensation --> B
A -- Sublimation --> C
C -- Deposition --> A
D[Triple Point<br/>Temperature: 273.16 K / 0.01°C<br/>Pressure: 611.657 Pa] --- A
D --- B
D --- C
style D fill:#f9f,stroke:#333,stroke-width:2px
Further readings[edit]
- Diagram Syntax | Mermaid https://mermaid.js.org/intro/syntax-reference.html