Mermaid To SVG
https://github.com/warpdotdev/mermaid-to-svg- Category
- Developer Tools
- Rank
- No. 955Tools index
Previous survey · No. 950 ·
- Pricing
- Open Source
- Type
- TOOL
- Builder
- warpdotdev
- GitHub
- 27 stars
- Date
About
Pure Rust crate for converting Mermaid diagram syntax to SVG. Built by Warp.
What it does
It turns Mermaid text into an SVG string through parsing, an internal graph model, automatic layout, and direct rendering. Flowcharts receive the clearest support, including multiple directions, common node shapes, labeled edge styles, subgraphs, inline styling, themes, and YAML frontmatter configuration.
Why it's ranked here
This is a focused choice when a Rust process must render diagrams without Node.js or a headless browser. Its flowchart capabilities are concrete, configurable, and backed by unit, snapshot, and visual comparison workflows. The broader Mermaid coverage remains explicitly short of Mermaid.js parity.
What's good
The renderer keeps the operational footprint small by producing SVG directly inside Rust. It uses the same family of layout algorithms as Mermaid.js through a Rust dagre port. Users get library and command-line entry points, configurable themes, flowchart spacing controls, Unicode-aware text wrapping, and structured errors.
Tradeoffs
Flowcharts are the primary target. ER, class, state, sequence, mind map, timeline, journey, quadrant, pie, and Gantt diagrams are described as experimental or unfinished. Several accepted frontmatter options are parsed for compatibility but do not affect rendering. Exact Mermaid.js output parity is therefore not promised.
How to use it well
Use it inside Rust applications, build pipelines, or command-line workflows that need SVG output without a JavaScript runtime. It fits best when flowcharts dominate and controlled theme or spacing options matter. Keep the canonical Mermaid tooling nearby when complete syntax coverage or exact rendering parity is required.
Technical notes+
Cargo.toml defines an edition 2021 Rust package, a library dependency set, a vendored dagre_rust path dependency, and a render_mermaid binary target. src/lib.rs exposes render_mermaid_to_svg, parses frontmatter, selects a theme, dispatches recognized diagram tokens to specialized modules, and otherwise sends flowcharts through parsing, configured layout, and SVG rendering. src/parser.rs builds the flowchart AST defined in src/ast.rs. src/layout.rs adapts RenderConfig spacing, padding, wrapping width, and font size before invoking dagre_rust. src/config.rs shows that layout, look, security_level, html_labels, diagram_padding, use_max_width, and default_renderer are parsed but currently not rendered. src/theme.rs provides five presets plus variable overrides, while src/error.rs defines typed parse, direction, shape, layout, render, and unsupported-type failures. src/text_wrap.rs estimates widths by Unicode grapheme count.
Observed
- License
- MIT, with third-party notices for derived code.
- Primary language
- Rust, using the 2021 edition.
- Packaging
- Cargo package with library and binary targets.
- Interfaces
- Rust library API and command-line interface accepting files or standard input.
- Runtime profile
- Direct SVG rendering without Node.js or a headless browser.
- Verification structure
- Unit tests, snapshot tests, and visual comparison against canonical Mermaid CLI output are documented.
Read from README.md, Cargo.toml, src/lib.rs, src/ast.rs, src/error.rs, src/theme.rs, src/config.rs, src/layout.rs, src/parser.rs, src/fixtures.rs, src/text_wrap.rs, src/c4_diagram.rs, src/er_diagram.rs, src/pie_diagram.rs.
What it can do
Convert Mermaid diagram syntax to SVG format
Mermaid diagram syntax text → SVG image file
Parse Mermaid flowchart definitions
Mermaid flowchart syntax → SVG flowchart diagram
Generate sequence diagrams from Mermaid syntax
Mermaid sequence diagram code → SVG sequence diagram
Transform Mermaid gantt charts to visual format
Mermaid gantt chart syntax → SVG gantt chart
Render Mermaid class diagrams as graphics
Mermaid class diagram definitions → SVG class diagram
Convert Mermaid state diagrams to SVG
Mermaid state diagram syntax → SVG state diagram
Tags
Tech Stack
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.