selkieioOpen the app

Mermaid diagrams, drawn and coded

One diagram.
Two forms.

Draw on a canvas and edit Mermaid code side by side. Change the drawing and the code is rewritten; change the code and the drawing follows.

Open selkie ioWatch the film

Runs in your browser · plain Mermaid in, plain Mermaid out

selkie io
selkie io with Mermaid code on the left and the same flowchart drawn on the canvas on the right. The selected step, Always in sync, highlights its lines in the code.

Why the name

A seal in the water.
A person on land.

In Scottish and Irish folklore, a selkie is the same being in two forms: a seal in the sea, a person on the shore.

Here, every diagram is code on one side and a drawing on the other. Same diagram, two forms, and they never drift apart.

In the waterA([Idea]) --> B[Sketch]
On landIdeaSketch

The film

The tale of selkie io

From an old sea legend to a live drawing that writes its own code. Sound on.

Features

Draw it. Type it. Both stay true.

The canvas and the code are two views of one diagram. Whatever you change on one side shows up on the other, right away.

Sync you can see

Select something on the canvas and its lines light up in the code. Put the cursor on a line and its steps light up on the canvas. Lines the canvas rewrites flash briefly.

selkie io in the light Porcelain theme: the cursor sits on the line idea --> code in the code, and the two steps it links, Idea and Type it as code, light up on the canvas.

Drag, drop, link

Drag shapes from the palette, pull a link from a step's dot into empty space, or press Tab for a linked step. Links go solid, dotted, thick or invisible, with arrows, circles or crosses.

Groups, glue and pins

Select steps and press ⌘G for a subgraph. Drop a link's end on a step to glue it to the best side, or on one of its points to pin it there.

Arrange in one click

Each layout animates into place, stays fully editable and is a single undo step.

  • Mermaid auto
  • Layered
  • Compact
  • Spacious
  • Grid
  • Circle
  • Snap to grid

Every step has a name

  1. Moved “Checkout”
  2. Linked A → B
  3. Arranged: Mermaid auto
  4. Edited code

Click any step in the history to go back to it. ⌘Z and ⇧⌘Z step through.

Exports that match the screen

Copy a PNG to the clipboard, or download PNG (1×–4×, transparent if you like), SVG or .mmd. Fonts are embedded.

Ten files, kept for you

Up to ten diagrams open at once, each in its own tab with its own undo history. Everything is autosaved in your browser, and a snapshot link shares a diagram with its layout.

Edit eight. Display them all.

8diagram types you edit right on the drawing, with the code following along
Allvalid Mermaid diagrams display in the live preview, beta types and ZenUML included

Edit on the canvas 5

Draw and change them on the canvas, each with its own palette and tools. The code updates as you draw; the drawing follows when you type.

  • Flowchart on the selkie io canvasFlowchartCanvas
  • Class diagram on the selkie io canvasClass diagramCanvas
  • Mind map on the selkie io canvasMind mapCanvas
  • State diagram on the selkie io canvasState diagramCanvas
  • ER diagram on the selkie io canvasER diagramCanvas

Edit in their own editors 3

Sequence diagrams, Gantt charts and pie charts get editors that work directly on the code lines, so your comments, spacing and everything else you wrote stay untouched.

  • Sequence diagram in its selkie io editorSequence diagramOwn editor
  • Gantt chart in its selkie io editorGantt chartOwn editor
  • Pie chart in its selkie io editorPie chartOwn editor

Display every other one all

Git graphs, timelines, journeys, charts, kanban boards, C4, architecture and the rest: every diagram Mermaid can read renders in the live preview, the beta types and ZenUML included. Edit them as code and watch the preview follow.

  • Git graph rendered in the selkie io previewGit graph
  • Timeline rendered in the selkie io previewTimeline
  • User journey rendered in the selkie io previewUser journey
  • Quadrant chart rendered in the selkie io previewQuadrant chart
  • XY chart rendered in the selkie io previewXY chart
  • Kanban rendered in the selkie io previewKanban

Nine themes. One sketch.

Each theme styles the app, the canvas and the rendered diagram. Or flip on the hand-drawn Sketch look. Theme in code writes it into the frontmatter, so other renderers use the same colors.

  • The same flowchart in the Abyss themeAbyss
  • The same flowchart in the Porcelain themePorcelain
  • The same flowchart in the Kelp themeKelp
  • The same flowchart in the Synthwave themeSynthwave
  • The same flowchart in the Blueprint themeBlueprint
  • The same flowchart in the Sakura themeSakura
  • The same flowchart in the Ink themeInk
  • The same flowchart in the Ember themeEmber
  • The same flowchart in the Classic Mermaid themeClassic Mermaid
  • The same flowchart in the hand-drawn Sketch lookSketch look

Live together

Draw it together.

Code, drawing and preview update live for everyone, also when two people type at the same moment.

  • Up to six peopleShare → Start live session copies a link. Everyone who opens it edits the same diagram with you, and the top bar shows who is here.
  • Cursors with namesOthers' code cursors and selections show in their colour. On the drawing you see their pointer, and the steps they have selected.
  • Your cursor stays putSomeone else's edit never moves your cursor, and edits in different places never overwrite each other.
  • Undo is yours⌘Z takes back your own changes and keeps what others did since.
  • Offline is fineWithout a connection you keep working; your changes merge when it is back. A reload keeps you in the session.
Live session · 2 of 6
A live session seen from Ana's browser: Ben's pointer and the step he selected show on the canvas in his colour, with his name, and his cursor sits in the code.

Still plain Mermaid

Your code stays yours.

By default the code stays plain Mermaid and positions live in your browser. Two toggles above the code store more in the code itself, and it remains valid Mermaid that other tools render as usual.

Layout in code
Appends a comment block with every position and bend. Mermaid ignores comments; selkie io reads them back, so the drawing survives copy, paste, git and sharing.
Theme in code
Writes theme, look and line style into the frontmatter, so other renderers use the same colors. Keys such as title are kept.
  • GitHub
  • Obsidian
  • mermaid.live
diagram.mmdvalid Mermaid
---
config:
  theme: base
  look: handDrawn
  themeVariables:
    primaryColor: "#123039"
---
flowchart TD
    A([Idea]) --> B[Sketch]

%% @layout v1
%% node A 120 40
%% node B 120 160
%% edge A B 0 200,100 to:0,-1
%% @end

Your diagram, in both its forms.

Draw it, type it, share it. selkie io keeps the two in step.

Open selkie io