Compatibility matrix

What renders where

A feature-by-platform view of Mermaid support across GitHub, GitLab, Notion, and Obsidian. Rows sourced from the platform guides below. Newer and beta diagram types are marked unverified rather than guessed at — check them on the destination platform itself before you rely on one.

FeatureGitHubGitLabNotionObsidian
Core diagram typesflowchart, sequenceDiagram, classDiagram, stateDiagram-v2, erDiagram, gantt, pie, journey.SupportedLong-stable types render consistently in READMEs, issues, and PRs.SupportedRenders reliably in markdown, issues, merge requests, and wikis.SupportedRenders dependably inside Mermaid code blocks and follows page theme.SupportedRenders natively in reading view and live preview, no plugin needed.
Newer / beta diagram typestimeline, mindmap, quadrantChart, sankey-beta, xychart-beta, block-beta, architecture-beta, kanban, requirementDiagram, gitGraph.UnverifiedDepends on GitHub's currently deployed Mermaid version — verify on GitHub itself before relying on one.UnverifiedDepends on the instance's Mermaid version; self-managed GitLab can lag well behind GitLab.com.UnverifiedOnly available once Notion updates its bundled Mermaid version, on Notion's own schedule.UnverifiedObsidian tends to track newer Mermaid releases faster than the others, but confirm per version.
Interactive click directivesThe click keyword for node links and callbacks.Not supportedDisabled in GitHub's rendering sandbox.Not supportedNot available in GitLab's renderer.Not supportedDoes not work inside Notion's Mermaid code blocks.LimitedConstrained by the app's security settings — do not rely on it.
Custom %%{init}%% / theme directivesInline directives that override diagram theme, colors, or config.RiskyMay be ignored or overridden by GitHub's own light/dark theming.RiskyCan conflict with GitLab's styling, particularly in dark mode.RiskyFights with Notion's own theming; color-dependent diagrams can become unreadable.RiskyWorks, but styling is local to your vault's theme and CSS snippets — looks different elsewhere.
Large / dense diagramsDiagrams with many nodes, edges, or a very wide layout.RiskyCan fail to render or get cut off; rendered inside a fixed-width column.RiskyEnforces size and performance guards — oversized diagrams may truncate or refuse to render.RiskyScales down to fit the page column width; labels can become hard to read.RiskyCan be slow on mobile, with clumsy pinch-zoom for large flowcharts.

Automated, not guessed

Diagram type support by Mermaid version

The platform table above is hand-curated from published guides. This one is not: it's generated by an actual test run (npm run test:version-matrix) that renders one real template per diagram type against each Mermaid version's real published package in headless Chromium. Last run 2026-07-16.

Diagram typeMermaid 9.4.3Mermaid 10.9.6Mermaid 11.14.0
flowchartRendersRendersRenders
sequenceDiagramRendersRendersRenders
stateDiagram-v2RendersRendersRenders
erDiagramRendersRendersRenders
timelineRendersRendersRenders
ganttRendersRendersRenders
classDiagramRendersRendersRenders
journeyRendersRendersRenders
gitGraphRendersRendersRenders
pieRendersRendersRenders
mindmapRendersRendersRenders
quadrantChartFailsNo diagram type detected for text: quadrantChartRendersRenders
sankey-betaFailsNo diagram type detected for text: sankey-betaRendersRenders
xychart-betaFailsNo diagram type detected for text: xychart-betaRendersRenders
kanbanFailsNo diagram type detected for text: kanbanFailsNo diagram type detected matching given configuration for text: kanbanRenders
requirementDiagramRendersRendersRenders

The platform table is a hand-curated seed; the version table above is real automated output, but only covers the Mermaid-version dimension — see the roadmap for the plan to extend automated testing to each platform's own rendering engine. Found something outdated? The platform guides have more detail per platform, and the error reference covers the parse failures behind some of these rows.