feat: networkDiagram type (#1227)

[aqys]

Closes #1227

Adds a new networkDiagram type for network topologies.

What

• Langium grammar (packages/parser/src/language/network/) with nodes,
  per-node metadata, subnets, and directional links (---, -->, <--, <-->)
• Diagram package (packages/mermaid/src/diagrams/network/): db, parser,
  renderer (d3-force layout), styles, detector, types
• Schema + default config wired through config.schema.yaml,
  defaultConfig.ts, .build/jsonSchema.ts
• Built-in icons: router, switch, server, firewall, cloud, database
• Demo (demos/network.html), docs (syntax/network.md),
  examples entry, theme integration (forest)

Screenshots

Tests

• Unit: parser, db, renderer (4553 mermaid tests pass)
• E2E: cypress/integration/rendering/network/network.spec.ts

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	9ea4219
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6a0d751c1e8c370008c8f0e5
😎 Deploy Preview	https://deploy-preview-7766--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9ea4219

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
mermaid	Minor
@mermaid-js/parser	Minor

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

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7766

mermaid

npm i https://pkg.pr.new/mermaid@7766

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7766

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7766

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7766

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7766

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7766

commit: 9ea4219

[codecov]

Codecov Report

❌ Patch coverage is 1.09223% with 815 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.24%. Comparing base (d830222) to head (9ea4219).
⚠️ Report is 8 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/diagrams/network/renderer.ts	0.00%	510 Missing ⚠️
packages/mermaid/src/diagrams/network/db.ts	0.00%	77 Missing ⚠️
packages/mermaid/src/diagrams/network/parser.ts	1.49%	66 Missing ⚠️
packages/mermaid/src/diagrams/network/styles.ts	2.56%	38 Missing ⚠️
packages/parser/src/language/network/module.ts	4.76%	20 Missing ⚠️
packages/mermaid/src/themes/theme-base.js	0.00%	16 Missing ⚠️
packages/mermaid/src/themes/theme-forest.js	0.00%	16 Missing ⚠️
packages/examples/src/examples/network.ts	7.69%	12 Missing ⚠️
packages/mermaid/src/diagrams/network/detector.ts	7.69%	12 Missing ⚠️
packages/mermaid/src/diagrams/network/diagram.ts	8.33%	11 Missing ⚠️
... and 10 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7766      +/-   ##
==========================================
- Coverage     3.26%   3.24%   -0.03%     
==========================================
  Files          600     611      +11     
  Lines        60744   61567     +823     
  Branches       917     928      +11     
==========================================
+ Hits          1986    1995       +9     
- Misses       58758   59572     +814     

Flag	Coverage Δ
unit	3.24% <1.09%> (-0.03%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/config.type.ts	100.00% <ø> (ø)
packages/mermaid/src/defaultConfig.ts	49.18% <100.00%> (+0.41%)	⬆️
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/mermaid/src/docs/.vitepress/config.ts	0.39% <0.00%> (-0.01%)	⬇️
packages/parser/src/language/index.ts	0.00% <0.00%> (ø)
packages/parser/src/language/network/index.ts	0.00% <0.00%> (ø)
packages/examples/src/index.ts	1.47% <0.00%> (-0.05%)	⬇️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
...ckages/parser/src/language/network/tokenBuilder.ts	0.00% <0.00%> (ø)
packages/parser/src/parse.ts	0.80% <0.00%> (-0.04%)	⬇️
... and 12 more

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	4 added	May 20, 2026, 9:00 AM

[aloisklink]

Hi @aqys, thanks for your contribution!

Is there any reason why this should be a separate diagram and we can't just add icons for firewall/router/switch to architecture diagrams?

There seems to substantial overlap with architecture diagrams: https://mermaid.js.org/syntax/architecture.html Even your proposed syntax and layout algorithm are quite similar.

[aqys]

Hi @aloisklink. Thank you for the feedback, and you're right that there's overlap.

The main differences are:

1. No icon pack dependency - node types like router, switch,
   firewall render with built-in SVG icons. Architecture diagrams
   require an external icon pack (e.g. @iconify-json/logos) to get
   network-specific icons.
2. Subnet layout force - nodes declared in the same subnet are
   pulled together in the force simulation, not just boxed after layout.
3. Per-node metadata - inline key/value annotations (ip, os, etc.)
   attached to nodes.

That said, I'm open to the alternative of extending the architecture
diagram with these capabilities instead of a new type, if the
maintainers prefer that direction I'm happy to pivot the work.