DIAGRAMS · LOCAL DESIGN WORKSPACE

Diagram & Flowchart Studio

Explain a process, map a database or plan a project with an editable diagram. Start with a template, change the text and download a clean SVG or PNG.

Edit the flowchart example or choose another template.

Diagram source

Mermaid syntax Ctrl/⌘ + Enter to render

Flowchart: A[Label] --> B{Decision}. Add connections on new lines. Templates show the syntax for each diagram type. This is a text-based editor; nodes are not draggable.

ThemeFlowchart direction

Render automatically after edits

Save your work

Filename

Open source fileUTF-8 Mermaid text, up to 48 KiB. Opening replaces the editor.

Source files keep the diagram text. Theme, background and export scale are selected on this page. Source is not saved automatically.

Diagram preview

Preview zoom

Render your diagram to see it here.

Exports become available after rendering.

Export backgroundPNG scale

SVG stays sharp at any size. PNG is limited to 8,192 pixels per side and 16 million pixels total. Preview zoom does not change export dimensions. Match the background to your theme for readable labels.

Up to 12,000 source characters, 200 lines and 200 graph edges. A 15-second rendering deadline resets the isolated renderer on timeout. Custom configuration/frontmatter, HTML labels, clicks, external images and fonts are disabled. Very large diagrams can still use substantial browser resources.

Rendering uses locally hosted Mermaid in a sandboxed frame. Public pages include third-party advertising; see our privacy information. Save your source before leaving the page.

Using Diagram & Flowchart Studio

Turn editable Mermaid text into diagrams with templates and local SVG/PNG exports.

Choose a starting template and click Replace with template. Edit its Mermaid source to describe your own process or data.
Render the diagram, select a theme and zoom the preview. Flowchart direction can be adjusted using the page control.
Choose a background and PNG scale, then download SVG or PNG. Download the source to edit it again later.

Example

The flowchart template branches on Worth testing?, loops back after collecting information and ends with Improve and release.
The database template shows customers, orders, order items and products. Change entity names and relationships to describe your own schema.

Questions & answers

Is this a drag-and-drop editor?

No. It uses Mermaid text syntax. Templates show the structure for flowcharts, sequences, classes, states, database relationships, project timelines, pie charts and mind maps.

Which format should I download?

SVG stays sharp when resized and suits documents or design tools. PNG is a raster image for sharing. The source download preserves editable Mermaid text, not the page’s theme and export settings.

Why is my diagram not rendering?

Check the syntax and simplify the source. Limits are 12,000 characters, 200 lines and 200 graph edges. Custom configuration, frontmatter, clicks, external resources and HTML labels are disabled.

What does preview zoom change?

Only the preview size. SVG uses diagram dimensions; PNG uses the selected export scale. PNG exports are capped at 8,192 pixels per side and 16 million pixels total.

Is the diagram uploaded?

Rendering uses locally hosted Mermaid in a sandboxed frame. Source is not saved automatically. Public pages include third-party advertising as described in the privacy policy.

Can I open a saved diagram?

Yes. Open a UTF-8 Mermaid .mmd or text file up to 48 KiB, with source still limited to 12,000 characters. Opening replaces the current editor content.

Why do labels look different in another app?

Font availability and SVG support vary. The tool uses system Arial/sans-serif without external fonts. Use PNG if you need fixed rendering, and choose a background that gives the theme enough contrast.