Repository navigation
Add support railroad diagrams - #7251
Conversation
🦋 Changeset detectedLatest commit: dc8817d The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
@mermaid-js/examples
mermaid
@mermaid-js/layout-elk
@mermaid-js/layout-tidy-tree
@mermaid-js/mermaid-zenuml
@mermaid-js/parser
@mermaid-js/tiny
commit: |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
0b66d06 to
61ace77
Compare
|
Is this abandoned issue ? |
|
@michalwidera |
735deae to
e1324e3
Compare
|
@ydah Appreciate the effort. As a language maker, I'm extra happy about this. Looking forward to the diagram. Review in the works. |
knsv
left a comment
knsv
left a comment
There was a problem hiding this comment.
[sisyphus-bot]
First off, @ydah — apologies that this PR has been waiting nearly four months without a review. That's too long, and the amount of work here clearly deserves timely feedback. This is an impressive and ambitious contribution — a full new diagram type with custom parser, renderer, config schema, 261 unit tests, and documentation. The railroad diagram is a genuinely useful feature (issue #4252 has been open since 2023), and we want to help get this across the finish line.
There are a couple of architectural items that need discussion before this can merge, but the foundation is strong.
What's working well
🎉 [praise] The AST design in railroadTypes.ts is excellent — clean discriminated union types for all 9 node types, with a well-thought-out DiagramDimensions interface that includes up/down offsets for baseline alignment. This is clearly designed by someone who understands how railroad diagram layout works.
🎉 [praise] Comprehensive unit test suite — 408 lines of parser tests, 103 lines of DB tests, 78 lines of detector tests, and 186 lines of styles tests. The parser tests cover both W3C and ISO 14977 notation variants, which is thorough.
🎉 [praise] The config schema in config.schema.yaml is well-structured with proper descriptions, types, minimums, and defaults for all 22 configuration options. Following the schema-first workflow correctly.
🎉 [praise] Source documentation in packages/mermaid/src/docs/syntax/railroad.md is comprehensive and uses the MERMAID_RELEASE_VERSION placeholder correctly. The syntax reference table in the PR description is an excellent overview.
🎉 [praise] The PathBuilder utility class in the renderer is a clean abstraction for SVG path construction — readable and type-safe.
Things to address
Blocking
🔴 [blocking] Missing E2E visual regression tests. This is the most critical gap. Every new diagram type must have visual regression tests in cypress/integration/rendering/ using the imgSnapshotTest() helper. These are non-negotiable for merge — they're the primary safeguard against visual regressions across the entire project. Without them, any future change to shared rendering code could silently break railroad diagrams with no automated detection.
A good starting point would be 5-8 test cases covering:
- Basic rule definition (single terminal/non-terminal)
- Sequence and choice constructs
- Optional and repetition operators
- A complex real-world grammar (like the JSON example from your demo)
- Multiple rules in one diagram
See cypress/integration/rendering/pie.spec.js or cypress/integration/rendering/mindmap.spec.ts for the pattern.
🔴 [blocking] Custom TypeScript parser instead of Langium. The project policy (documented in CLAUDE.md and the diagrams CLAUDE.md) requires new diagram types to use Langium for parsing — grammars go in packages/parser/src/language/*.langium. Your hand-written recursive descent parser is well-implemented (clear error messages with position info, 14 token types, 8 AST node types), but using a custom parser means:
- No shared tooling for syntax highlighting, error recovery, or language services
- Maintenance burden falls entirely on the railroad diagram rather than being shared with the Langium infrastructure
- Inconsistency with the 7 other diagrams that already use Langium
That said, EBNF parsing has some inherent complexity (two notation styles, operator precedence, nested grouping) that might make Langium integration non-trivial. It would be worth discussing with the maintainers whether an exception is warranted here, or whether the grammar can be mapped to Langium. If you'd like, I can help sketch what the .langium grammar would look like.
Important
🟡 [important] Theme system not integrated. The styles.ts function signature is getStyles(options?: RailroadStyleOptions) which uses a custom options type. Other diagrams receive Mermaid's ThemeVariables object, which means their colors automatically adapt when users switch between themes (default, dark, forest, neutral, base).
Currently, railroad diagrams will look the same regardless of theme — the hardcoded defaults (#FFFFC0, #000000, etc.) won't respond to %%{init: {'theme': 'dark'}}%%. This is a significant usability gap.
To integrate with themes, the getStyles function should accept theme variables and map them to railroad-specific CSS classes, similar to how journey/styles.ts or pie/styles.ts work. The config schema colors can still serve as overrides, but the base should derive from theme variables.
🟡 [important] CSS injection via unvalidated style options. The styles.ts interpolates config values (color strings, font families) directly into CSS template literals without validation. If an attacker controls config via %%{init: {"railroad": {"fontFamily": "x}}.railroad-terminal{display:none}/*"}}}%%, they could inject arbitrary CSS.
Other diagrams avoid this because their styles receive theme variables that are pre-validated by the khroma color library. Since railroad bypasses the theme pipeline, it would be good to validate color/font values before CSS interpolation — e.g., a strict pattern like /^#[0-9a-fA-F]{3,8}$|^[a-zA-Z]+$/ for colors and stripping CSS metacharacters from font families.
→ styles.ts:7-28
🟡 [important] Handdrawn/rough mode not addressed. The new diagram type checklist requires either implementing handdrawn mode or explicitly documenting that it's unavailable. Given that railroad diagrams use custom SVG path rendering (not shared shapes from rendering-util/), rough mode via roughjs might not be straightforward — but it should be acknowledged in the docs or PR description so users know.
Nits
🟢 [nit] Generated files edited directly. docs/syntax/railroad.md (329 lines) and docs/config/setup/mermaid/interfaces/MermaidConfig.md are in auto-generated directories. Only packages/mermaid/src/docs/syntax/railroad.md needs to be committed — the docs build will regenerate the top-level docs/ files.
🟢 [nit] config.type.ts — verify regeneration. The changes look auto-generated (has the standard "referenced by JSON-Schema" comments), but please confirm it was regenerated via pnpm run --filter mermaid types:build-config rather than manually edited. CI checks this via types:verify-config.
🟢 [nit] Text not sanitized at DB layer. In railroadDb.ts, setTitle(), addRule() etc. store user text without running it through sanitizeText() from diagrams/common/common.js. The renderer uses D3's .text() (safe) and DOMPurify protects the final output, so this isn't exploitable — but for consistency with other diagram DBs and defense-in-depth, it would be good to sanitize text at the DB boundary.
Security
The XSS sub-agent reviewed all 7 new files. The renderer consistently uses D3's .text() method (which uses textContent, not HTML parsing) for all user-controlled text, and the final SVG output goes through DOMPurify. No XSS vulnerabilities identified. The CSS injection concern (🟡 above) is the only security-relevant finding — it's a style injection, not script execution, but still worth addressing.
Summary
| Severity | Count |
|---|---|
| 🔴 blocking | 2 |
| 🟡 important | 3 |
| 🟢 nit | 3 |
| 💡 suggestion | 0 |
| 🎉 praise | 5 |
The foundation here is genuinely strong — the AST design, test coverage, and rendering algorithm are well-crafted. The two blocking items (e2e tests and parser approach) are architectural requirements for the project, not problems with the quality of your implementation. Adding cypress tests would be the fastest path to unblocking, and the parser question can be resolved through discussion with the maintainers.
Thank you for your patience with the review timeline, and for the substantial effort in this PR.
Self-check
- At least one 🎉 praise item
- No duplicate comments
- Severity tally: 2 🔴 / 3 🟡 / 3 🟢 / 0 💡 / 5 🎉
- Verdict matches criteria: REQUEST_CHANGES (🔴 present)
- No inline comments used
- Tone check: appreciative, acknowledges delay, constructive
e111b31 to
6bd61db
Compare
|
@knsv Thank you for your review. The parser is now implemented in I also added railroad-specific parser tests and re-ran the railroad-focused Mermaid tests and lint checks. There are two details I would like to confirm:
|
b168fae to
15c4b2d
Compare
|
I believe it to be a break with "the mermaid philosophy to use a syntax for the diagram this is or resembles ABNF or EBNF. I would prefer an intermediate language that is expression what to draw and let the program that produces mermaid make the translation from what every grammar language is uses. My proposal would be a language that represents a tree of layout elements that have clear name how they are visualized such an expression then needs to be the right hand side of a rule/production |
|
Thanks @xtofs: that's a fair point to raise, and I want to push back gently because I think the mermaid philosophy actually points the other way. Mermaid's design principle isn't "use a low-level layout primitive language" - it's "use a syntax that resembles the domain being modeled." Flowcharts use arrows that look like flow ( For grammar/syntax diagrams, EBNF (and ISO 14977) is the domain. It's the notation language designers, spec authors, and parser-generator users already write every day. Asking them to hand-translate
into
inverts that. It pushes the translation work onto the user and turns a 5-line grammar into something verbose and error-prone, exactly the friction mermaid usually removes. If users wanted to describe diagrams as nested layout primitives they'd reach for an SVG library, not mermaid. The "different grammars need different notations" concern is real but I think it's better solved by adding a small number of well-known notations on top of the same renderer (W3C and ISO are already supported in this PR; ABNF/PEG could be additive if there's demand) rather than by exposing the IR as the public surface. That said, the AST the renderer consumes is essentially the intermediate representation you're describing. There's nothing stopping a future PR from also exposing it as an alternate input mode for power users, without removing the EBNF front end. I'd be open to that as a follow-up if a concrete use case emerges. @ydah - continuing the review on the Langium migration; I'll leave inline comments shortly. |
There was a problem hiding this comment.
Round 2 — @ydah, this is a great response to the previous review. Both prior blockers are resolved (Langium migration done cleanly, e2e visual regression tests in place), and you also went beyond what I asked for by addressing the theme integration and CSS-injection 🟡 items. Foundation is now solid; what's left is small.
(Addition by knsv, I am lurking, monitoring my bot :) I included the nit in a FYI capacity, I will approve and merge even if you leave them untouched).
What's working well
🎉 [praise] Langium migration is genuinely clean. packages/parser/src/language/railroad/railroad.langium is well-structured — explicit interfaces for every AST node, hidden terminals for YAML frontmatter / %%{}%% directives / both comment styles, and the postfix-vs-primary split makes the precedence story easy to follow.
🎉 [praise] The mermaid-side parser collapsed from a hand-written recursive descent into a thin adapter (packages/mermaid/src/diagrams/railroad/parser/railroadParser.ts:27-128). The transformChoice/Sequence/Term/Primary/Postfix chain is exactly the right shape for mapping Langium AST to your renderer-facing AST without coupling them.
🎉 [praise] RailroadValueConverter cleanly centralizes string-escape handling and special-sequence stripping. Nice separation from the grammar.
🎉 [praise] Theme integration in styles.ts:126-188 (buildThemeDefaults) is thorough — terminal/non-terminal/comment/special colors all derive from themeVariables with sensible fallbacks, and the cypress 'adapts to dark theme colors' case (cypress/integration/rendering/railroad.spec.ts:87) actually exercises it.
🎉 [praise] CSS injection mitigation in styles.ts:23-25 is well-designed. The color regex covers modern color spaces (hwb, lab, lch, oklab, oklch) — most hand-rolled validators miss those. Strict font-family pattern too.
🎉 [praise] sanitizeAstNode in railroadDb.ts:24-53 recursively sanitizes user text at the DB boundary before it reaches the renderer. Nice defense-in-depth.
🎉 [praise] docs/syntax/railroad.md explicitly documents the handdrawn limitation (line 214) and the LR-only constraint (line 215). That's exactly what the new-diagram-type checklist asks for.
Things to address
Important
🟡 [important] Hardcoded 800px width estimate clips wide diagrams. railroadRenderer.ts:627:
maxWidth = Math.max(maxWidth, 800); // Estimate for nowrenderRule() only returns { height }, so renderDiagram() has no idea how wide each rule actually is and falls back to a fixed 800. Any rule wider than 800px will be drawn correctly inside the rule group but cropped by the SVG viewbox passed to configureSvgSize. The JSON example in your demo (and in the cypress 'renders multiple rules in one diagram' test) is borderline — a slightly more elaborate grammar will overflow.
Fix: have renderRule() also return its measured width (nameWidth + 20 + result.dimensions.width + 10 + markerRadius) and feed that into maxWidth in renderDiagram(). The let maxWidth = 0 initialization on line 622 then becomes meaningful too.
🟡 [important] Detector / grammar / docs disagree on the railroad alias. This is the question you raised in your follow-up comment:
- Grammar accepts both —
railroad.langium:94:('railroad-diagram' | 'railroad') - Parser tests use the alias —
packages/parser/tests/railroad.test.ts:24:parse(\railroad\n…`)` - Detector accepts only
railroad-diagram—railroadDetector.ts:20:/^\s*railroad-diagram/i - Docs show only
railroad-diagram
Net effect: the alias is unreachable through normal diagram detection — a user who writes railroad will get "diagram type unknown" before the parser ever sees the input. So the grammar branch and the parser test are dead code at the integration level.
My preference is to drop the alias from the grammar (and the corresponding parser test) for now. Single source of truth, no documentation drift, and aliases are easy to add later if anyone actually asks for one. If you'd rather keep it, the detector and docs both need updating to match — but that's more surface area for less benefit.
🟡 [important] orientation config option is currently a no-op. The schema declares orientation: 'LR' | 'TB' (config.schema.yaml:25-29) but the renderer never reads it; the docs even call this out as a known limitation. A config key that silently does nothing is misleading — users will set it, see no change, and not understand why.
Two reasonable options:
- Remove
orientationfrom the schema until TB is actually implemented (cleanest), or - Have the parser/renderer warn when
orientation: 'TB'is set so the user gets feedback.
I'd lean toward (1).
Nits
🟢 [nit] railroadRenderer.ts:64 — private svg: any;. Other diagrams use D3's Selection<…> types (e.g., Selection<SVGSVGElement, unknown, Element | null, unknown>). Not blocking, but worth tightening since the rest of the renderer is fully typed.
🟢 [nit] railroadRenderer.ts:574-578 — temporarily mutating this.svg to nest groups makes renderRule non-reentrant and surprising:
const previousSvg = this.svg;
this.svg = defGroup;
const result = this.renderExpression(rule.definition);
this.svg = previousSvg;Cleaner shape: pass the parent group as an argument to renderExpression/renderTerminal/etc., or instantiate a new RailroadRenderer scoped to defGroup.
🟢 [nit] railroadRenderer.ts:537 — // TODO: Implement proper exception rendering rendering exception as [base, "-", except] is a reasonable stopgap, but worth tracking as a follow-up issue so it doesn't get lost.
🟢 [nit] railroad.langium:16 — the RR_SPECIAL_SEQUENCE regex is clever (/\?(?=[^?;]*[^?\s;][^?;]*\?)[^?;]*\?/) but the lookahead structure isn't obvious at a glance. A two-line comment explaining "must contain at least one non-whitespace char; cannot span semicolons (avoids collision with postfix ?)" would save a future reader some time.
🟢 [nit] railroadDb.ts:13-16 — keeping both title and diagramTitle with getDiagramTitle() returning diagramTitle || title mirrors a few other diagram DBs but is genuinely confusing. Worth picking one as the source of truth if it's not load-bearing for populateCommonDb compatibility.
Answers to your two questions
-
Special sequences scoped local to a rule — yes, that's the right call. EBNF special sequences are opaque-by-definition with
?delimiters; allowing them to span;would be ambiguous and the postfix-?collision makes broader scope risky. Keep the current behavior. -
railroadvsrailroad-diagram— covered in the 🟡 [important] item above. My vote: drop the alias from the grammar.
On @xtofs's earlier comment
I'll reply to that thread separately, but in short: I don't think it should block this PR. Mermaid's design principle is "domain-meaningful syntax, not abstract layout primitives" — flowcharts use arrow-like syntax, sequence diagrams use message-passing, etc. For grammar diagrams, EBNF is the domain. Asking users to hand-translate EBNF into a layout tree IR inverts the value proposition. The IR could be exposed as an optional alternate input mode in a follow-up PR for power users, but the EBNF front end stays.
Security
No new XSS or injection findings. The CSS-injection concern from round 1 is now addressed by the sanitizeColorValue / sanitizeFontFamilyValue patterns in styles.ts. D3 .text() usage is consistent throughout the renderer, and DB-level sanitizeText adds a second layer.
Summary
| Severity | Count |
|---|---|
| 🔴 blocking | 0 |
| 🟡 important | 3 |
| 🟢 nit | 5 |
| 💡 suggestion | 0 |
| 🎉 praise | 7 |
Excellent round 2. The width-estimate bug is the only real visual issue; the alias inconsistency and the no-op orientation are quick cleanups. Once those land, I'm comfortable approving on round 3.
|
I also want to push back gently but my main priority would be to get support in mermaid one or the other way so I would be ok either way.
I get the idea that mermaid principle is "use a syntax that resembles the domain being modeled"
I would like to see how supporting ABNF and/or PEG is going to work and how other diagram types do deal with "flavors" of their diagram syntax. From my point of view, ABNF (RFC5234) has a higher priority than EBNF due to it's usage in IETF. So the demand is already proven. But more importantly, I think this contention (which grammar language to support) gives reasons to start with exposing what you rightfully call an intermediate representation and I would call "the" visual language, so that mermaid is not coupled to one of multiple ways to write grammar but rather put that responsibility in a different module or let the user directly express the abstract layout. |
|
@xtofs Thanks for pushing back — this is exactly the kind of conversation we want before a new diagram type solidifies, and the distinction you're drawing is a fair one. A few things to put on the table: Beta status. This diagram will land in beta, so the input syntax isn't frozen. We have room to iterate on the public surface before anyone depends on it, and I'd rather take an extra round-trip than ship a shape we regret. Your distinction is real. "Flowchart/ER are already visual languages, EBNF isn't" is not something I want to wave away. The "domain = notation" argument is cleaner for diagrams whose domain was always pictorial, and railroad diagrams sit differently on that spectrum. I want to sit with that rather than rebut it. Help me understand the use case better. A few things would sharpen this for me:
What would you actually suggest? If you can sketch what IR-as-public-syntax would look like inside a mermaid block — rules, labels, cross-references, titles — that would move the discussion from principle to something we can put side-by-side with the EBNF front end. I'm genuinely open here. The two paths aren't mutually exclusive (EBNF front-end + exposed IR is a coherent shape), and I'd rather we land somewhere both of us are happy with than let the decision calcify around whichever syntax shipped first. |
Thanks. This is a health discussion and probably a reason why mermaid is such an amazing sucess
I have created a pipeline that looks like:
my preferred would be (b) having mermaid focusing on an explict IR exclusively and moving the separate concern of ABNF -> IR and EBNF -> IR into separate modules. But I would understand if this is perceived as raising the barrier to entry.
No, not a blocker. I just happen to have ABNF as the source of truth. And even though railroad syntax diagrams are closer to EBNF than ABNF (because of the stricter repetition rules that are available in ABNF but not EBNF) the example I have implemented shows that this is still a valuable transformation and visualization
|
|
@xtofs Thank you for the detailed feedback and the concrete IR syntax suggestion — it was exactly what we needed to move forward with a cleaner architecture. I've restructured the implementation based on your proposal. The railroad diagram now supports four input syntaxes, all sharing the same renderer: IR syntax (
|
If it helps at all, I've been following this discussion with great interest because I'm keen to try using the new railroad diagram support for diagrams that currently use DITA The pipeline I would be generating railroad diagrams from would be taking syntaxdiagram xml and mapping that to the new mermaid syntax, e.g. trying to replicate 
from <syntaxdiagram>
<title>LINK</title>
<groupcomp>
<kwd>LINK</kwd>
</groupcomp>
<groupcomp importance="required">
<kwd>PROGRAM</kwd>
<delim>(</delim>
<var>name</var>
<delim>)</delim>
</groupcomp>
<groupchoice importance="optional">
<groupseq importance="required">
<groupcomp importance="required">
<kwd>COMMAREA</kwd>
<delim>(</delim>
<var>data-area</var>
<delim>)</delim>
</groupcomp>
<groupcomp importance="optional">
<kwd>LENGTH</kwd>
<delim>(</delim>
<var>data-value</var>
<delim>)</delim>
</groupcomp>
<!-- etc -->
</groupseq>
<groupcomp importance="required">
<kwd>CHANNEL</kwd>
<delim>(</delim>
<var>name</var>
<delim>)</delim>
</groupcomp>
</groupchoice>
<!-- etc -->
</syntaxdiagram> |
|
@ydah really nice restructure, thanks for turning this around so fast. IR as the primary syntax with grammar front-ends layered on top is elegant. One more thing: I think we should wait for @xtofs to confirm the IR shape works for them before we call the design settled. @xtofs: does sequence / choice / optional / oneOrMore / zeroOrMore / terminal / nonterminal / special cover what you had in mind? |
041a69e to
338c7cf
Compare
fc7f8cc to
58a7a00
Compare
|
I’ve resolved the conflicts. I guess it’s been about a week now? |
|
@knsv I think the time has come. If there are no other blockers, I’d be very grateful if you could proceed with the merge. |
|
Hi @ydah, 
|
|
@pbrolin47 I’ve fixed the issue. I missed it, and it looks like it regressed at some point. Sorry about that. |
|
@pbrolin47 Thank you for the review. @knsv Since you requested changes, I believe I’ll need you to approve it at the end and then merge it. Please take a look when you have a chance! |
|
Let's merge it! |
|
@ydah, Thank you for the contribution! |
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
Upstream release: https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.16.0 Release notes: ### Minor Changes - [#7535](mermaid-js/mermaid#7535) [`ea1c48f`](mermaid-js/mermaid@ea1c48f) Thanks [@ragelink](https://github.com/ragelink)! - feat(cynefin): Adds the Cynefin framework as a new diagram type (beta) to Mermaid (available as `cynefin-beta`). The Cynefin framework, created by Dave Snowden, is a decision-making framework that categorizes problems into five complexity domains, widely used in agile, incident management, strategy, and organizational design. - [#7721](mermaid-js/mermaid#7721) [`f45cc2c`](mermaid-js/mermaid@f45cc2c) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): add box-drawing character input support for treeView diagrams - [#7550](mermaid-js/mermaid#7550) [`f1f4d45`](mermaid-js/mermaid@f1f4d45) Thanks [@DominicBurkart](https://github.com/DominicBurkart)! - feat(xychart): add per-point text labels for xychart line plots - [#7527](mermaid-js/mermaid#7527) [`b4d0442`](mermaid-js/mermaid@b4d0442) Thanks [@notionparallax](https://github.com/notionparallax)! - feat(treeView): Extends the existing treeView-beta diagram with features useful for representing file/directory structures. - [#7793](mermaid-js/mermaid#7793) [`a6f097d`](mermaid-js/mermaid@a6f097d) Thanks [@SSDWGG](https://github.com/SSDWGG)! - feat(er): support optional ER attribute types with a `?` suffix - [#7772](mermaid-js/mermaid#7772) [`37f2e36`](mermaid-js/mermaid@37f2e36) Thanks [@devareddy05](https://github.com/devareddy05)! - feat(gantt): support multiple `excludes` / `includes` lines so long exclusion lists can be split into commented groups (#6270) - [#7708](mermaid-js/mermaid#7708) [`4e63e9d`](mermaid-js/mermaid@4e63e9d) Thanks [@txmxthy](https://github.com/txmxthy)! - feat(architecture): add `align row|column {ids…}` directive to architecture-beta diagrams so authors can declare horizontal or vertical alignment of services explicitly. - [#7760](mermaid-js/mermaid#7760) [`05223be`](mermaid-js/mermaid@05223be) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(pie): Enhance Pie Chart - Enable donut chart, Set legend position, and highlight slice - [#7251](mermaid-js/mermaid#7251) [`216e4e9`](mermaid-js/mermaid@216e4e9) Thanks [@ydah](https://github.com/ydah)! - feat(railroad): Add support for Railroad Diagrams (Syntax Diagrams) with four input syntaxes: IR (railroad-beta), EBNF (railroad-ebnf-beta), ABNF (railroad-abnf-beta), and PEG (railroad-peg-beta). - [#7774](mermaid-js/mermaid#7774) [`e5c75e6`](mermaid-js/mermaid@e5c75e6) Thanks [@ngdaniels](https://github.com/ngdaniels)! - feat(xychart): enable rotate label on X-axis - [#7791](mermaid-js/mermaid#7791) [`974fa7b`](mermaid-js/mermaid@974fa7b) Thanks [@knsv-bot](https://github.com/knsv-bot)! - feat(swimlane): add swimlane as a standalone diagram type with a dedicated layered orthogonal layout algorithm ### Patch Changes - [#7744](mermaid-js/mermaid#7744) [`633c261`](mermaid-js/mermaid@633c261) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix(architecture): add `architecture.seed` config option to make architecture diagrams render deterministically. Resolves #7729. - [#7732](mermaid-js/mermaid#7732) [`c8ba156`](mermaid-js/mermaid@c8ba156) Thanks [@rkdfx](https://github.com/rkdfx)! - fix: tolerate leading horizontal whitespace before YAML frontmatter delimiters. Closes mermaid-js/mermaid#7613 - [#7314](mermaid-js/mermaid#7314) [`4e4e6c4`](mermaid-js/mermaid@4e4e6c4) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(flowchart): Prevent crash when flowchart node shape is undefined - [#7762](mermaid-js/mermaid#7762) [`cfd2391`](mermaid-js/mermaid@cfd2391) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(class): support styling and callbacks for generic classes - [#7284](mermaid-js/mermaid#7284) [`c1f116d`](mermaid-js/mermaid@c1f116d) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(gantt): Render gantt vertical markers without affecting row layout or chart height - [#7786](mermaid-js/mermaid#7786) [`72fbab1`](mermaid-js/mermaid@72fbab1) Thanks [@knsv-bot](https://github.com/knsv-bot)! - fix(er): allow special characters (e.g. dots) in ER diagram attribute names and types by escaping them with backticks - [#7672](mermaid-js/mermaid#7672) [`4887e97`](mermaid-js/mermaid@4887e97) Thanks [@sjackson0109](https://github.com/sjackson0109)! - fix(flowchart): respect per-subgraph direction keyword in Dagre layout. Fixes #4648 - [#7734](mermaid-js/mermaid#7734) [`a4c1e50`](mermaid-js/mermaid@a4c1e50) Thanks [@OfirHaf](https://github.com/OfirHaf)! - fix(block): read block padding and sanitize config dynamically instead of at module load time - [#7674](mermaid-js/mermaid#7674) [`cc75089`](mermaid-js/mermaid@cc75089) Thanks [@cyphercodes](https://github.com/cyphercodes)! - fix(block): respect current DOMPurify config when sanitizing labels - [#7711](mermaid-js/mermaid#7711) [`be2e282`](mermaid-js/mermaid@be2e282) Thanks [@Jinacker](https://github.com/Jinacker)! - fix(flowchart): render flowchart and state self-loop edges as a single SVG path. - [#7781](mermaid-js/mermaid#7781) [`d945968`](mermaid-js/mermaid@d945968) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(radar): align axis labels based on angular position to prevent clipping - [#7661](mermaid-js/mermaid#7661) [`2f5e9e8`](mermaid-js/mermaid@2f5e9e8) Thanks [@nabila401](https://github.com/nabila401)! - fix(venn): fix 3-circle venn diagram union rendering - [#7780](mermaid-js/mermaid#7780) [`8dcdce4`](mermaid-js/mermaid@8dcdce4) Thanks [@Dharya-dev](https://github.com/Dharya-dev)! - fix(xychart): truncate plot data to match x-axis category count - [#7235](mermaid-js/mermaid#7235) [`1bbc189`](mermaid-js/mermaid@1bbc189) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Support consecutive LaTeX in node text - [#7247](mermaid-js/mermaid#7247) [`365c1b1`](mermaid-js/mermaid@365c1b1) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix(treeView): Ensure treemap labels render correctly in large nested diagrams - [#7754](mermaid-js/mermaid#7754) [`06a32b7`](mermaid-js/mermaid@06a32b7) Thanks [@palgunatm66](https://github.com/palgunatm66)! - fix(sequence): sequenceDiagram rect backgrounds using theme-aware fallback colors - [#7693](mermaid-js/mermaid#7693) [`afaf306`](mermaid-js/mermaid@afaf306) Thanks [@dull-bird](https://github.com/dull-bird)! - fix(quadrant-chart): allow CJK, emoji, Latin-1 accented characters, and other non-ASCII text in unquoted axis/quadrant/point labels. Fixes #7120. - [#7751](mermaid-js/mermaid#7751) [`79e97cd`](mermaid-js/mermaid@79e97cd) Thanks [@puneetdixit200](https://github.com/puneetdixit200)! - fix(state): render state diagram click tooltips with mermaidTooltip - [#7570](mermaid-js/mermaid#7570) [`c2305df`](mermaid-js/mermaid@c2305df) Thanks [@PinguinsRule](https://github.com/PinguinsRule)! - fix(state): Fix invalid syntax between state and '{' - [#7758](mermaid-js/mermaid#7758) [`a4a250b`](mermaid-js/mermaid@a4a250b) Thanks [@mk24x7](https://github.com/mk24x7)! - fix(venn): render labeled higher-arity unions when the underlying pairwise unions are not declared. Resolves #7656. - Updated dependencies \[[`ea1c48f`](mermaid-js/mermaid@ea1c48f), [`b4d0442`](mermaid-js/mermaid@b4d0442), [`4e63e9d`](mermaid-js/mermaid@4e63e9d), [`216e4e9`](mermaid-js/mermaid@216e4e9)]: - @mermaid-js/parser@1.2.0 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: give me a 98K <240642031+inhuman-0@users.noreply.github.com>
7 participants
This PR adds support for Railroad Diagrams (Syntax Diagrams) with a layered architecture: an explicit IR (Intermediate Representation) core plus grammar-specific front-ends.
Fixes: #4252
Summary
Railroad diagrams visualize formal grammars as path-based flow diagrams. This implementation separates layout description (IR) from grammar notation parsing, enabling multiple input syntaxes to share a single renderer.
Four input syntaxes
1. IR (direct layout control)
2. EBNF (W3C / ISO 14977)
3. ABNF (RFC 5234)
4. PEG (Parsing Expression Grammar)
Design Decisions
Architecture
All four diagram types share the same database, renderer, styles, and internal AST types. Only the parser differs per syntax. This follows the approach discussed in #7251 (comment) — the IR is the public syntax for direct layout control, while grammar-specific front-ends (EBNF, ABNF, PEG) transform their notation into the same IR.
Core components
Langium-based parsers — Each syntax has its own
.langiumgrammar and Langium service module. Parsed ASTs are transformed into a shared set of internalASTNodetypes.Shared state management (db) — Stores named rules, title, and accessibility metadata. Sanitizes all text values through Mermaid's common sanitization.
SVG rendering engine — Bottom-up dimension calculation with recursive layout. Generates smooth SVG paths with arcs for branching/merging.
Theming integration — CSS classes (
.railroad-terminal,.railroad-nonterminal,.railroad-line, etc.) customizable through Mermaid's theming system.IR functions
sequence(a, b, ...)choice(a, b, ...)optional(x)oneOrMore(x)zeroOrMore(x)terminal("text")nonterminal("text")special("text")EBNF syntax support
"text""text"identifieridentifierA BA , BA | BA | BA?[ A ]A*{ A }A+( A )( A )/* */(* *)? text ?A - BA - BABNF syntax support
"text"%x41-5A,%d65,%b0101rulenameA BA / B[ A ]*A,1*A,3*5A( A )PEG syntax support
"text"/'text'NameA BA / BA?A*A+.&A!A( A )Styling and Theming
Visual design follows classic railroad diagram conventions (Niklaus Wirth / JSON.org):
Test coverage
135 tests across 11 test files covering all four parsers, database, detector, and styling.
Tasks
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.