Loading…
Loading…
Paste Mermaid into the code panel and it offers a one-click Convert. The transpiler rewrites every Mermaid diagram type into this language, mapping each onto the closest family the canvas can render. Only a genuinely unknown header reports "not supported yet"; a bad line within a known type degrades to a diagnostic, never a thrown error.
Mermaid is an import format; Koboyo diagram code is the editing format. After converting, you edit and generate the result like anything else.
This Mermaid flowchart:
flowchart TD
A[Start] --> B{Ready?}
B -->|yes| C[Ship]
B -->|no| D[Wait]
D --> B
converts to Koboyo code that renders like this:
flowchart
Start [rectangle] -> Ready [diamond]
Ready -> Ship [rectangle]: yes
Ready -> Wait [rectangle]: no
Wait -> Ready
| Mermaid type | Family | Notes |
|---|---|---|
flowchart / graph | flowchart | Every legacy bracket shape and @{ shape: … } name, & fan-out, subgraph to group, all link styles including the --o / --x endings and invisible ~~~ links, style / classDef / class / ::: to colour, click to link, @{ icon } to icon. |
swimlane-beta | bpmn | Each top-level subgraph becomes a lane; cross-lane edges become handoffs. |
sequenceDiagram | sequence | participant … as, ->>/-->>/-x/-), +/- activations, loop/alt/opt/par/break/critical, notes, autonumber (numbers ride in the labels). box grouping and rect tints are dropped but keep their contents. A participant's link / links becomes a click-through URL on its lifeline (one per actor; extra URLs are reported). properties has nothing to map onto and is reported. |
classDiagram | class | Classes to UML boxes with attribute and method compartments; <|-- / *-- / o-- / ..> to their UML arrowheads; <<stereotype>> kept in the box, and namespace to a labelled container. |
stateDiagram(-v2) | statemachine | [*] to a start marker or a final bullseye, scoped to the composite it is written in — a composite's own initial state stays inside its frame. Composite state X { } to group, nested to any depth; concurrency dividers (--) to one nested region group per parallel branch, each with its own start. <<choice>> to diamond, <<fork>> / <<join>> to the UML synchronisation bar. style / classDef / class / ::: colour states, as in a flowchart. Notes become note shapes on a dashed edge. |
erDiagram | erd | Crow's-foot ||--o{ kept mark-for-mark (each end's zero/one/many, .. dashed non-identifying); attributes to name type pk/fk. |
journey | journey | Sections to bands, Task: score: actors kept whole — the score plots the curve, the actors become dots. |
gantt | gantt | Dates, durations, after dependencies, until, excludes weekends, sections and done/active/crit/milestone all kept; after <id> / until <id> are rewritten to the native task ids. Two tasks whose names differ only in case keep separate bars. Excluded weekends are shaded on the chart, and each task's name rides its own bar. |
pie | chart (pie) | Rows to label : value. |
mindmap | mindmap | Root to central, indentation to branches. |
timeline | timeline | Title kept, sections to section bands, a period with 2+ events to a bullet plus indented event sub-bullets. |
quadrantChart | chart (quadrant) | Axis captions (including the Low --> High form), the four quadrant-1..4 zone labels, and points placed by [x, y]. |
requirementDiagram | erd | Requirements and elements to entity boxes, keeping id / risk / verifymethod as fields; typed relationships between them. |
gitGraph | gitgraph | One lane per branch; id/tag text, type: REVERSE/HIGHLIGHT, merges and cherry-picks all kept. |
C4* | architecture | Person to user icon, SystemDb to cylinder, Boundary to group. |
xychart-beta | chart | x-axis to categories, bar / line to series. |
sankey-beta | sankey | CSV src,target,value to weighted flows; a row without a usable number is dropped rather than drawn flat. |
packet-beta | flowchart | Byte fields to grouped nodes. |
kanban | flowchart | Columns to groups, items to sticky notes. |
architecture-beta | architecture | Groups and services with icon or shape. |
radar-beta | chart (radar) | Axes to categories, curves to series. |
treeView-beta | flowchart | File trees, given by indentation or by box-drawing characters (├──, ┣━━). Arbitrary depth, folders and files read apart, ## note descriptions kept. |
venn-beta | venn | set to circles, union to labelled overlaps, text to the members inside a set. |
zenuml | sequence | Messages mapped; control flow simplified. |
Mermaid's connector semantics are the opposite of ours, and the transpiler
accounts for it: solid --> becomes ->, dashed -.-> becomes -->, thick
==> becomes ->, and <--> / o--o / x--x become <->.
The o and x endings are marks, not directions, so they survive as
[head: circle] and [head: cross] — see Attributes. A
one-sided --o stays one-way with a circle at the target; o--o is
bidirectional with a circle at both ends.
A few Mermaid inputs describe how their renderer draws rather than what the diagram contains, and those stay with our layout:
%%{init: {'flowchart': {'curve': …}}}%% and the other renderer configs are
stripped. Connector routing here is decided per edge from the geometry —
straight where that reads cleanly, elbowed across ranks, curved around
obstacles — so a global curve setting would fight the router rather than
inform it. linkStyle colours and animation DO carry over, because those are
content.img node becomes a plain box with its label. The picture lives at a URL
the diagram would have to fetch, and a node that silently renders empty when
that URL dies is worse than a labelled box. Add an image to the canvas
separately if you want the art.Common to all types: a leading --- … --- frontmatter block is read for its
title: (the rest dropped), %%{ init … }%% directives are stripped, and %%
starts a comment. Every input line maps to one output line, so diagnostics point
at the converted text.