Mermaid online editor - Revision history

Planetoid: /* List of Mermaid online editor */

2025-10-28T06:05:30Z

List of Mermaid online editor

← Older revision		Revision as of 14:05, 28 October 2025
Line 16:		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]

2025-04-03T03:52:48Z

← Older revision		Revision as of 11:52, 3 April 2025
Line 37:		Line 37:
	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]]

2025-04-03T03:50:31Z

← Older revision		Revision as of 11:50, 3 April 2025
Line 2:		Line 2:

	{{LanguageSwitcher \| content = [[Mermaid online editor \| English]], [[Mermaid online editor in Mandarin \| 漢字]] }}		{{LanguageSwitcher \| content = [[Mermaid online editor \| English]], [[Mermaid online editor in Mandarin \| 漢字]] }}

	~~{{Drafting}}~~

	== Why use Mermaid syntax ==		== Why use Mermaid syntax ==

2025-04-03T03:49:28Z

Why use Mermaid syntax

← Older revision		Revision as of 11:49, 3 April 2025
Line 6:		Line 6:

	== Why use Mermaid syntax ==		== Why use Mermaid syntax ==
	Why use Mermaid syntax instead of traditional drawing methods. Now AI ~~can be asked~~ to "use Mermaid syntax to draw XX flowchart".		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.		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.

2025-04-03T03:48:21Z

← Older revision		Revision as of 11:48, 3 April 2025
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 \| 漢字]] }}

	{{Drafting}}		{{Drafting}}

			== Why use Mermaid syntax ==
			Why use Mermaid syntax instead of traditional drawing methods. Now AI can be asked to "use Mermaid syntax to draw XX flowchart".

			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 ==

2025-04-03T03:43:15Z

List of Mermaid online editor

← Older revision		Revision as of 11:43, 3 April 2025
Line 9:		Line 9:
	[https://excalidraw.com/ Excalidraw \| Hand-drawn look & feel • Collaborative • Secure]		[https://excalidraw.com/ Excalidraw \| Hand-drawn look & feel • Collaborative • Secure]
	* Output format: (1) Download image files png & svg (2) 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]

2025-04-02T09:53:33Z

← Older revision		Revision as of 17:53, 2 April 2025
Line 8:		Line 8:

	[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
	* Example: [https://excalidraw.com/#json=Z9I2DD9Ex4v2Mold0Jfw5,oXVtnyGwvS5ZldqZw_dNdg link]		* Example: [https://excalidraw.com/#json=Z9I2DD9Ex4v2Mold0Jfw5,oXVtnyGwvS5ZldqZw_dNdg link]

2025-04-02T08:21:08Z

Online services

← Older revision		Revision as of 16:21, 2 April 2025
Line 3:		Line 3:
	{{Drafting}}		{{Drafting}}

	== ~~Online services~~ ==		== 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

2025-04-02T08:18:22Z

← Older revision	Revision as of 16:18, 2 April 2025
(No difference)

2025-04-02T08:17:48Z

Online services

← Older revision		Revision as of 16:17, 2 April 2025
Line 12:		Line 12:

	[https://www.mermaidflow.app/editor Editor \| Mermaid Flow]		[https://www.mermaidflow.app/editor Editor \| Mermaid Flow]
	* Output format: png, pdf & svg		* Output format: Download png, pdf & svg files

	== Example Mermaid syntax ==		== Example Mermaid syntax ==