Which Mermaid diagrams can I import?

Flowcharts (graph and flowchart), sequence diagrams, class diagrams, state diagrams, ER diagrams and mindmaps. Paste the code, check the live preview, and add it to your board as editable elements.

Can I export to Mermaid?

Database diagrams export to Mermaid ER, alongside SQL, DBML and code for frameworks like Prisma, Rails and Laravel. Other boards export as PNG, SVG or PDF, or as a written document.

📊 Diagram as Code, made editable

Mermaid, unlocked

Got Mermaid code in a README, a wiki or an AI chat? Paste it into DraftyLab, check the live preview, and get a real board: boxes you can drag, restyle, comment on and share with your team.

Import a Mermaid diagram

system_arch.mmd

Preview

01
02
03
04
05
06
07

graph TD;

A[Client] -->|Auth| B(Gateway);

B --> CRouter;

C --> D[Supabase];

// Paste → preview → add to board

ADD TO BOARD

On your board Editable

API CALL

Input: architecture.mmd

UTF-8 Mermaid JS

Supported Diagram Formats

Not just simple boxes: DraftyLab reads these Mermaid syntaxes and lays them out as editable boards. State diagrams are supported too.

Flowcharts & Systems

Standard

Loops, decisions and subgraphs become shapes, groups and labelled connections you can keep editing.

graph TD
  A[Client] -->|Auth Request| B(Gateway)
  B -->|Success| C{Authorize}

Mindmaps

Balanced Layout

Ideas branch out from a central node on both sides, ready for your team to add to.

mindmap
  root((Brainstorm))
    LeftBranch(Research)
    RightBranch(Product)

Class & ER Diagrams

Dagre Spaced

Classes and entities become tables with their members, keys and relationships, spaced so nothing overlaps.

classDiagram
  class User {
    +String email
    +Boolean is_active
    +login()
  }

Sequence Timelines

Chronological

Actors get lifelines, messages become arrows in order, and notes stay where they belong.

sequenceDiagram
  User-->>App: Login request
  App-->>Database: Fetch user profile

Paste, preview, place

A zoomable live preview shows exactly what you'll get before anything lands on the board. Replace the board or add the diagram next to what's already there.

Or keep it as a card

Prefer the original rendering? Insert it as a diagram card that shows the Mermaid diagram on the board, next to everything else.

Mermaid ER out

Database diagrams export to Mermaid ER for your docs — and to SQL, DBML, Prisma, Rails, Laravel and more.