Describe or scan · Arrange

SayDiagram: from idea or photo to a diagram you can paste into

Plain language or a whiteboard photo becomes editable Mermaid. Arrange on a visual canvas — source stays in sync — then copy into Figma and other design tools.

✓ From idea — plain language to Mermaid in seconds
✓ Scan an image — photo or sketch to editable source
✓ Arrange → paste into Figma (PNG, SVG, or plugin)

Mermaid source

Live diagram

Editable Mermaid underneath — rearrange visually anytime

Why SayDiagram

Built for visual Mermaid — not code-only editors or blank whiteboards

Code-only Mermaid tools stop at syntax. Draw-from-scratch boards lose editable source. SayDiagram keeps both: generate or scan, arrange visually, ship to design tools.

Scan, don’t redraw

Photograph a whiteboard or sketch and get editable Mermaid — polish in Arrange instead of rebuilding from scratch.

Arrange with source in sync

Drag on a visual canvas. Mermaid stays editable underneath — unlike whiteboards that export a dead image.

Paste into Figma

One copy — PNG or SVG into Figma, FigJam, Penpot, Excalidraw — or send via the SayDiagram Figma Community plugin.

Get the Figma plugin →

Create — idea, scan, or blank canvas

Start from language, a photo, Arrange blank, or an existing .mmd file.

From idea

Describe a process or system in plain language. AI writes Mermaid, picks a diagram type (or you choose), and opens it ready to arrange — flowchart, sequence, ER, state, class, mindmap, timeline, requirement, pie, or Gantt.

Scan image

Drop a photo or sketch of a diagram and get editable Mermaid source — then polish layout in Arrange instead of redrawing from scratch.

Arrange mode

Drag-and-drop canvas for flowchart, sequence, ER, state, class, and mindmap — start blank without a .mmd file, or open a template. Mermaid source stays in sync. Timeline, pie, Gantt, git graph, C4, and Sankey stay Preview-only.

auth-flow.mmd

Drop .mmd · .mermaid · .md with fences

Import .mmd

Drag and drop .mmd, .mermaid, or Markdown with Mermaid fences — open existing source in the editor without retyping.

Polish — layout, theme, and history

After you create, make the diagram presentable without leaving the editor.

Polish & AI layout

Even out gaps with one click, or use AI layout polish for denser diagrams — Free includes daily AI polishes.

Auto layout

Balanced, square, landscape, or portrait presets — then fine-tune manually on the canvas.

Hide unused nodes

Hide selected or unused nodes to focus the story without deleting source.

Diagram fonts

Pick label fonts that match your deck or docs — applied across Preview and Arrange.

Preview themes

Neutral, Forest, Dark, Default, and Base — synced with %%{init}%%.

Version history & pins

Auto snapshots as you edit. Tag milestones like v1 or v1.2 to pin them — Free 3 pins, Pro 8 — then restore anytime.

FlowchartSequenceQuizCertificate

Lessons, quizzes, and certificates — free for everyone

Learn Mermaid

Short lessons with cheatsheets and live previews. Take a quiz to check your level — pass at 80% for a lesson badge, unlock the path certificate when you finish every lesson.

Start learning →

Product4 diagrams
FavoritesStarred
TrashRestore anytime

Folders & library

Organize with folders, search, favorites, and trash. Free includes a folder limit; Pro unlocks unlimited folders.

Ship — Figma, GitHub sync, share links, and small teams

Get the diagram into the tools your stakeholders already use.

Copy for design tools

Copy PNG or SVG to paste with Cmd/Ctrl+V into Figma (and FigJam), Penpot, Excalidraw, and PNG into decks like Canva — or send to the SayDiagram Figma Community plugin.

Get the Figma plugin →

docs/auth-flow.mmdAuto-sync

Push · pull · webhook Auto-sync on Pro

GitHub sync

Pro and Team can push or pull Mermaid to a gist or repo file, and enable Auto-sync so edits flow both ways after you save — ideal for README and docs workflows.

GitHub sync docs →

Share & embed

Public or unlisted links for readers, plus iframe embed codes for docs and sites. Pro can brand the share page.

Team for small squads

When you need shared workspaces: invite up to 5 editors and unlimited viewers, with comments and optional realtime co-edit.

Works with

Built on Mermaid. Sync to GitHub. Paste into Figma.

Keep diagrams in a gist or repo with Pro GitHub sync, or copy SVG/PNG into Figma (and FigJam), Penpot, Excalidraw, and more — or install the SayDiagram Figma plugin. Compatibility only; SayDiagram is an independent product.

MMermaid.jsPowered by open-source Mermaid

GitHubSync .mmd to gist or repo

IDE extensionVS Code, Cursor, Windsurf, VSCodium

FigmaPaste or use the SayDiagram plugin

PenpotPaste SVG or PNG

ExcalidrawPaste image or import

Prefer examples first? Browse templates

How it works

Describe or photograph → arrange → paste into Figma.

Create

Describe what you need, scan a diagram photo, import .mmd, open a template, or start blank on Arrange.

Arrange

Drag the canvas, polish spacing or AI layout, pick a theme, and pin important versions. Mermaid source stays in sync.

Paste into Figma

Copy PNG or SVG into Figma (and FigJam), Penpot, or Excalidraw — or use the SayDiagram Figma Community plugin. Share a link or embed when you need readers, not editors.

Get the Figma plugin →

Your workspace at a glance

From idea and scan to folders, favorites, and tagged version pins — keep every diagram in one place. Free, Pro, or Team.

SayDiagram · Dashboard

All diagramsUnfiledProduct

From ideaScan imageNew diagramImport .mmd

Auth flow from idea

sequence · generated

Whiteboard scan

flowchart · from image

Themed delivery flow

forest theme · v1.2 pinned

History of Social Media

timeline · preview

From the blog

Questions, answered

How SayDiagram works, what’s free, and when to upgrade.

What is SayDiagram?

SayDiagram turns plain language or a diagram photo into editable Mermaid, lets you arrange the layout on a visual canvas (source stays in sync), then paste into Figma, FigJam, Penpot, Excalidraw, Canva, and other design tools — or share and embed. Free, Pro, and Team plans.

How is this different from a Mermaid code editor?

Code-only editors stop at syntax. SayDiagram adds image scan (whiteboard or sketch → Mermaid, with cleanup and multi-image upload), Arrange mode so you drag nodes while source stays editable, and one-copy paste into Figma, FigJam, Penpot, Excalidraw, and Canva. You can still edit the Mermaid source anytime.

Do I need to know Mermaid syntax?

No. You can describe a process in plain language, scan a sketch or whiteboard photo, start from a template at /templates (each template has its own page, e.g. /templates/flowchart), or drag shapes in Arrange mode. Prefer learning the syntax? Free lessons at /learn include cheatsheets, live previews, and quizzes. You can still edit the Mermaid source whenever you want.

Which diagram types are supported?

Flowchart, sequence, ER, state, class, mindmap, timeline, requirement, pie, Gantt, git graph, C4, and Sankey diagrams — plus themes, fonts, and layout tools that work across arrangeable types. Present reveals flowchart nodes, pie slices, Gantt tasks, git commits, and Sankey flows step-by-step (C4 stays a full slide). Timeline, pie, Gantt, git graph, C4, and Sankey stay Preview-only (no Arrange).

What’s included on the free plan?

Unlimited private diagrams, share links and embeds (up to 3 public or unlisted), SVG export, favorites, trash, and .mmd import. Free includes daily AI caps (3 ideas, 1 image scan, 3 layout polishes), 5 Arrange sessions and 5 PNG/PDF exports per day (watermarked), plus 3 folders and version history (last 5 + 3 pins). Daily AI allowances apply on all plans; extreme automated usage may be rate-limited.

How does Pro differ from Free?

Pro adds unlimited folders, sharing, Arrange, and watermark-free PNG/PDF export, plus generous AI allowances (100 ideas, 20 scans, 50 layouts per day), longer version history, custom branding on share and embed pages (and hide Present’s “Powered by SayDiagram” via Profile), GitHub sync (gist/repo push-pull and App Auto-sync), Public API keys, and priority support. Pro is $12/month or $10/month billed yearly — built for people who live in scan → Arrange → Figma paste, with docs in git when you need them.

See all questions

Need help? Contact support at hello@saydiagram.com, or follow us on Facebook and Instagram.

Coming soon

Desktop software

Same Arrange, themes, and polish tools, offline — shipping for Mac and Windows.

macOS

Coming soon

Intel and Apple Silicon (M-series) builds.

Windows

Coming soon

Native Windows desktop app.

Describe it. Scan it. Arrange it. Paste into Figma.

Free to try — Pro for more AI, Arrange, and design-tool export.

SayDiagram: from idea or photo to a diagram you can paste into