Mermaid is the dominant text-to-graph language — it's all over GitHub, Notion, and LLM output. But it renders as flat, hard-to-style, non-interactive, inaccessible SVG. fromMermaidparses Mermaid graph/flowchart syntax into a topology Semiotic can render with hover, isolation, theme tokens, keyboard navigation, and an accessible navigation tree — on a diagram class that is almost universally inaccessible today.
Why this matters
The crucial design choice is what to reconstruct. A Mermaid flowchart is a directed acyclic graph, not a force-of-springs blob — so the adapter doesn't just hand back nodes and edges, it computes alongest-path layering and stamps each node with alayer and row. Rebuild the analytical logic, not the appearance: the layering is what lets the same graph render as a proper layered diagram (via the lineageDagLayout recipe) or as the interactive force graph below — your choice, same semantics.
Paste a diagram, get a layered graph
Edit the Mermaid source; the parsed, layered Semiotic graph updates live — shape-appropriate glyphs (diamonds for decisions, cylinders for stores), directional arrows, and edge labels, laid out by the computed layering.
Layered Semiotic graph (7 nodes, 7 edges)
The reconstructed DAG layering
Each node's computed layer (longest path from a source) — the structure a layered render uses.
layer 2
Transform
Quarantine
Wiring it up
TS
import { unstable_fromMermaid } from "semiotic/experimental" import { mermaidDagLayout } from "semiotic/recipes" // tree-shaken; pulled in only if used import { NetworkCustomChart } from "semiotic/network" const { nodes, edges, direction } = unstable_fromMermaid(` graph TD A[Ingest] --> B{Valid?} B -->|Yes| C[Transform] B -->|No| D[Quarantine] `) // A layered flowchart — shape glyphs, directional arrows, edge labels — from // the computed layer/row coordinates. No layout engine, no extra dependency. <NetworkCustomChart nodes={nodes} edges={edges} nodeIDAccessor="id" sourceAccessor="source" targetAccessor="target" layout={mermaidDagLayout} layoutConfig={{ direction }} />
For large or dense graphs where edge-crossing minimization matters, run a real Sugiyama layouter (the BYO dagre recipe, or d3-dag) to assign layer/row, then render with the same layout — positioning and rendering are separate concerns, and the heavy layout engine stays a peer/BYO dependency.
Faithful, or it refuses
The risk in a text-to-graph adapter is the parser pretending to understand more than it does. fromMermaid handlesgraph/flowchart with directions, node shapes, and labeled edges; other Mermaid diagram types — sequence, class, state, ER, gantt, pie, mindmap — are declined with a reason, not coerced into a wrong graph. Subgraph grouping is flattened (nodes kept) with a warning, and a cyclic graph is layered best-effort rather than crashing. The parser is a small dedicated one — Mermaid's own runtime is never a Semiotic dependency.
Where this goes
The headline use is a docs site where a single Mermaid block becomes a live, themed, accessible architecture diagram instead of a flat SVG. The same shape serves any place Mermaid is the lingua-franca: a microservice graph in a runbook, an LLM that emits a flowchart you want to make interactive and keyboard-navigable, a Notion export. The accessibility win is the differentiator — and because the layout and the node positioning are separate concerns, a host that wants cross-node reach-dimming wires it through the shared selection store the custom-layout context exposes.
Related