@dskripchenko/diagrams

Diagrams written as text — in Mermaid, PlantUML, Graphviz DOT, D2, DBML, Structurizr DSL or the Wardley map DSL — rendered to SVG, with no runtime dependencies and no DOM. A string goes in, a string of SVG comes out: the same call works in a browser, in server-side rendering and in a Node build script.

import { render } from '@dskripchenko/diagrams'

const { svg } = render(`flowchart LR
  A[Request] --> B{Valid?}
  B -->|yes| C[Render PDF]
  B -->|no| D[Reject]`)

element.innerHTML = svg

// PlantUML: recognised by its @startuml.
render(`@startuml
actor User
User -> API ++ : POST /orders
return 201
@enduml`)

Supported: flowchart (with subgraphs and per-subgraph direction), sequenceDiagram, stateDiagram-v2, erDiagram, classDiagram, C4 (C4Context, C4Container, C4Component, C4Dynamic, C4Deployment), pie, gantt, timeline, xychart-beta, mindmap, journey, quadrantChart, kanban, requirementDiagram, architecture-beta, sankey-beta, gitGraph, block-beta; PlantUML sequence, use case, component, deployment, activity (with swimlanes), class, object, state, ER, C4 (C4-PlantUML) and timing diagrams, mind maps, WBS, Gantt charts and Salt wireframes; Graphviz DOT and D2 (drawn as flowcharts), DBML (as ER diagrams), Structurizr DSL (as C4) and Wardley maps. The syntax is recognised from how a source starts, or given with render(source, { syntax }).

Why another renderer

• Zero dependencies. Mermaid pulls in d3, dagre, DOMPurify and more — megabytes. This package is one module of about 100 KB gzipped before your bundler minifies it, layout engine included.
• Safe by construction. Every label and attribute is escaped by the one SVG builder that produces the output; HTML in labels is shown as text. Styles are parsed and limited to a fixed set of properties with validated values, links to http(s), mailto and relative addresses. Nothing from the diagram text is ever executed.
• Deterministic. The same source and the same text measurer give the same SVG, byte for byte — diagrams can be snapshot-tested and cached.
• Themeable with CSS. Every colour is a CSS custom property (--dg-*) with a default; a dark theme is a dozen declarations.
• Errors you can act on. A source that cannot be read raises a DiagramError with the line, the column and, where there is one, a hint.

The syntax is a declared subset of Mermaid's and PlantUML's. What is supported is listed per diagram type in the documentation; anything else is an error rather than a silently wrong picture.

Documentation

| | English | Русский | Deutsch | 中文 | |---|---|---|---|---| | Getting started | en | ru | de | zh | | Flowchart | en | ru | de | zh | | Sequence diagram | en | ru | de | zh | | State diagram | en | ru | de | zh | | Entity relationship diagram | en | ru | de | zh | | Class diagram | en | ru | de | zh | | Pie chart | en | ru | de | zh | | Gantt chart | en | ru | de | zh | | Timeline | en | ru | de | zh | | XY chart | en | ru | de | zh | | Mind map | en | ru | de | zh | | Journey | en | ru | de | zh | | Quadrant chart | en | ru | de | zh | | Kanban board | en | ru | de | zh | | Requirement diagram | en | ru | de | zh | | Architecture diagram | en | ru | de | zh | | Sankey diagram | en | ru | de | zh | | Git graph | en | ru | de | zh | | Block diagram | en | ru | de | zh | | PlantUML | en | ru | de | zh | | Graphviz DOT | en | ru | de | zh | | D2 | en | ru | de | zh | | DBML | en | ru | de | zh | | Structurizr DSL | en | ru | de | zh | | Wardley map | en | ru | de | zh | | Theming | en | ru | de | zh |

Install

npm install @dskripchenko/diagrams

Node 20 or newer for server-side use; any current browser.

License

MIT. Security issues: see SECURITY.md.