Editor basics

The editor shows Mermaid source on one side and a live preview on the other. Changes render as you type. The diagram title sits in the toolbar — rename anytime.

Edits auto-save to the cloud while you work. You do not need a separate Save action for normal editing.

• Preview — rendered Mermaid (default for reading and Present).
• Arrange — visual canvas to drag nodes; source stays editable and in sync (supported types only).
• Present — fullscreen step-through for walkthroughs.

Product docs stay focused on SayDiagram workflows. For flowchart, sequence, ER, and other type syntax, use the lessons at /learn — each includes a quiz to check your level — or open a starter from /templates.