Mermaid to React Flow

This project parses Mermaid diagram text and renders interactive React Flow graphs.

Supported Diagrams

• flowchart
• sequenceDiagram
• stateDiagram
• classDiagram
• erDiagram
• gantt

Compatibility Matrix

The project now includes a compatibility matrix with status + priority tags.

• Status values: supported, partial, not supported
• Priority tags: P0, P1, P2

Matrix source:

• src/diagram/compatibilityMatrix.ts

Coverage is surfaced in the app header as a live percentage.

Syntax Family Fixtures

Fixture packs are available for each major Mermaid syntax family under:

• tests/fixtures/syntax/

Each family contains:

• basic
• advanced
• malformed
• kitchen-sink

Families included:

• journey
• gantt
• pie
• mindmap
• timeline
• gitGraph
• quadrantChart
• requirementDiagram
• sankey
• xychart
• kanban
• architecture
• c4

Validation tests:

• tests/syntaxFamilies.test.ts
• tests/compatibilityMatrix.test.ts
• tests/validationInspector.test.ts
• tests/performanceBudget.test.ts

Premium Viewer Controls

The preview pane includes interactive command actions:

• Focus node
• Trace path
• Highlight dependencies

Flowchart groups also support collapse/expand controls with subgraph badges.

Quick Start

• Install dependencies: npm install
• Start dev app: npm run dev
• Build production bundle: npm run build

Samples

Use the built-in sample buttons in the UI to load examples for each supported diagram type.

Gantt Sample Syntax

gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Development
  Task A :done, a1, 2024-01-01, 30d
  Task B :a2, after a1, 20d
  Task C :crit, a3, 2024-02-15, 15d
  section Release
  GA Milestone :milestone, ga, 2024-04-01

Loading

Supported task flags:

• crit
• active
• done
• milestone

Supported duration units:

• h (hours)
• d (days)
• w (weeks)
• m (months)
• y (years)

Test and Snapshot Workflow

• Run tests: npm test
• Verify snapshots: npm run snapshots:check
• Intentionally refresh snapshots: npm run snapshots:refresh
• Full CI checks locally: npm run ci

Snapshot source file:

• tests/fixtures/processor-snapshots.json

Parser + Layout Coverage

• Parser behavior tests: tests/processors.test.ts
• Snapshot regression tests: tests/processorSnapshots.test.ts
• Sequence layout tests: tests/sequenceLayout.test.ts
• Gantt layout tests: tests/ganttLayout.test.ts
• Pipeline performance tests: tests/performance.test.ts

Release Checklist

• npm run build
• npm test
• npm run snapshots:check
• Validate sample diagrams in UI
• Update README for behavior changes
• Tag baseline release