mermaid-js/mermaid
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
How mermaid is put together
Mermaid is a pnpm monorepo that renders text-based diagrams (flowcharts, sequence, gantt, etc.) to SVG in the browser. The core library lives in packages/mermaid, with pluggable layout engines (@mermaid-js/layout-elk, layout-tidy-tree), an external-diagram example package, a ZenUML wrapper, a parser package, and a private local editor shell. Diagram definitions flow through Jison/Langium-generated parsers into per-diagram databases and renderers built on D3, with DOMPurify used to sanitize output. Tooling includes esbuild-based dev/build servers (.esbuild/server.ts), a Vite middleware dev server (.vite/server.ts), Vitest unit tests, Playwright visual/e2e tests, and Changesets for versioning.
Languages
Frameworks
Infrastructure
Major components
packages/mermaid (core)
Core Mermaid library: diagram registration, configuration system, rendering pipeline, accessibility, and all built-in diagram types.
packages/parser
Standalone parser package using Langium grammars (langium-config.json) for newer diagram syntaxes like event modeling.
@mermaid-js/layout-elk
ELK-based layout engine plugin implementing the mermaid layout API over elkjs.
@mermaid-js/layout-tidy-tree
Tidy-tree layout engine plugin wrapping non-layered-tidy-tree-layout.
@mermaid-js/mermaid-example-diagram
Reference implementation showing how external diagram modules plug into Mermaid (detector, db, renderer).
@mermaid-js/mermaid-zenuml
ZenUML sequence-diagram integration package with its own detector/parser/renderer.
@mermaid-js/mermaid-local-editor
Private local editor shell whose static assets get bundled into dist alongside vendored mermaid.min.js and purify.min.js.
Dev tooling (.esbuild/.vite/.build)
esbuild watch/dev server with SSE live reload and a Lit-based Dev Explorer for browsing/rendering .mmd files, plus Vite middleware server, Jison/JSON-Schema plugins, Langium codegen, and type bundling.
A very light week with a single documentation fix.
5 weeksWeek of 2026-08-24
Week of 2026-08-24latest
A very light week with a single documentation fix.
Week of 2026-08-17
The new agentflow diagram type moved closer to release while testing coverage and security hardening expanded significantly.
Week of 2026-08-10
The use case diagram feature was polished and merged after weeks of refinement.
Week of 2026-08-03
The use case diagram's parser was rebuilt on a modern framework and a security patch release went out.
Week of 2026-07-27
New shapes landed, C4 diagrams moved to a unified renderer, and several dependency vulnerabilities were patched.
Over the past month the Mermaid team has been busy expanding what the diagramming library can draw, landing two brand-new diagram types — a use case diagram and an agentflow diagram — alongside new shapes like folder, bucket, console, browser and person. In parallel they modernized their testing setup by migrating suites from Cypress to Playwright with visual snapshot coverage, fixed a stream of rendering bugs (label clipping, edge routing, theme colors), and shipped security updates to dependencies like DOMPurify and js-yaml. The final week was a quiet one, just fixing a few broken links in a blog post.
Week by week
2026-08-24A very light week with a single documentation fix.latest1 change
Docs
Fixed broken blog post links
Repaired links in the Mermaid AI blog post that were pointing to dead addresses.
2026-08-17The new agentflow diagram type moved closer to release while testing coverage and security hardening expanded significantly.6 changes
Feature
Agentflow diagram progressed
A new 'agentflow' diagram type got extensive fixes including surviving containment cycles, safer DOM ids, parse-time error reporting, and cleaned-up grammar documentation.
Chore
Broader automated test coverage
End-to-end tests for sequence diagrams and mindmaps were expanded, and more visual snapshot fixtures were added to catch rendering regressions.
Fix
Security hardening of test infrastructure
The e2e test workflows were hardened against code injection attacks and now only fail renders on actual cross-site-scripting page errors.
Fix
Layout engine edge fixes
The ELK layout engine now correctly positions labels on unrouted edges and clips straight-line fallback edges to node borders.
Fix
Text size limit enforced correctly
The maximum text size setting is now checked against the exact string handed to the parser, preventing oversized inputs from slipping through.
Chore
CI tooling alignment
The Playwright browser-testing version was pinned consistently across config files so continuous integration runs reliably.
2026-08-10The use case diagram feature was polished and merged after weeks of refinement.6 changes
Feature
Use case diagram finalized
The new use case diagram now accepts markdown punctuation in labels, digit-leading identifiers, explicit ids, and inline metadata on system boundaries.
Fix
Label rendering fixes
Node labels no longer lose their last character when clipped, actor stereotypes render only once, and HTML labels align properly.
Fix
Theme-aware boundary colors
System boundary colors are now derived from the active theme instead of being hardcoded.
Docs
Documentation cleanup
The use case docs had their limitations, migration, and notes sections corrected, and the full example uses the new boundary syntax.
Chore
Visual regression snapshots for use case
Every development fixture for the use case diagram now has an Argos visual snapshot so future changes can't silently break it.
Chore
Removed unused ANTLR tooling
Leftover parser-generation tooling that was no longer needed was deleted from the project.
2026-08-03The use case diagram's parser was rebuilt on a modern framework and a security patch release went out.6 changes
Refactor
Use case parser migrated to Chevrotain
The use case diagram's parsing logic was rewritten using the Chevrotain library, completing its grammar and adding internal access to the parsed structure.
Fix
Security update to DOMPurify
The DOMPurify sanitization library was updated to 3.4.12 to address a vulnerability.
Fix
Dependency pinning fix
Langium was pinned to version 4.2.1 so the project keeps working on Node 20 and with Chevrotain v11.
Chore
Version 11.16.1 released
A patch release was cut merging recent fixes back into the main line.
Refactor
Faster screen updates
Rendering work began batching layout recalculations using FastDOM to reduce jank when diagrams update.
Chore
CI supports newer TypeScript
The package-check pipeline now works with the latest TypeScript versions.
2026-07-27New shapes landed, C4 diagrams moved to a unified renderer, and several dependency vulnerabilities were patched.6 changes
Feature
Four new shapes added
Folder, bucket, console, and browser shapes were registered so diagrams can use these icons natively.
Feature
C4 diagrams use unified shapes
C4 architecture diagrams now render through the shared shape system, with relationship endpoints placed via each shape's intersection and optional label wrapping.
Fix
Security patches for js-yaml, vitest, and DOMPurify
Vulnerable versions of js-yaml 3.x, vitest, and DOMPurify were overridden or updated to safe releases.
Chore
C4 tests migrated to Playwright
The C4 characterization test suite was ported from Cypress to Playwright as part of the ongoing test modernization.
Fix
Reverted problematic direction fix
An earlier change to flowchart directions was rolled back because it caused issues.
Chore
Improved developer example page
The local example.html playground gained live editing, error display, and render-time reporting to help developers debug diagrams.
Dependencies and code review
Dependency advisories
Security Watch
1 vulnerable package (1 advisories) across 79 scanned dependencies.
js-yaml 4.3.0
1 advisory. Fixed in 4.3.1.
How it can be abusedMermaid parses YAML frontmatter from diagram text using js-yaml. An attacker who can submit or paste a crafted diagram into any app that renders user-supplied Mermaid charts can make the browser tab hang or burn CPU while the YAML is parsed, affecting end users and potentially servers if diagrams are processed there.
- highGHSA-5p4m-2wfm-xmqjJS-YAML: Quadratic CPU consumption in !!omap resolution (3.x and 4.x) — CVE-2026-59870 fix not backported
Code review
No concrete code-level issues confirmed.
Get this report every week for your repos.
GitZoid learns each repo, reports what changed, and flags what needs attention. One flat price for the whole team.
$19 a month, flat · First 10 outputs free · No card required