feat: Add Ishikawa diagram

[exoego]

📑 Summary

Resolves #4784
Added ishikawa-beta syntax

Demo:

light mode	dark mode

📏 Design Decisions

• Chosen simple indent-based syntax
• The order of rendering follows WYSIWYG principal, or in other words, top-to-down, as marked up in text

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	52dfde9
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69a0584756c34000085f1f8b
😎 Deploy Preview	https://deploy-preview-7387--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[changeset-bot]

🦋 Changeset detected

Latest commit: 52dfde9

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

This PR includes changesets to release 2 packages

Name	Type
@mermaid-js/examples	Minor
mermaid	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/mermaid/@mermaid-js/examples@7387

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/layout-tidy-tree

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: 52dfde9

[argos-ci]

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

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	12 added	Feb 26, 2026, 2:39 PM

[codecov]

Codecov Report

❌ Patch coverage is 1.47330% with 535 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.56%. Comparing base (59bab4c) to head (52dfde9).
⚠️ Report is 13 commits behind head on develop.

Files with missing lines	Patch %	Lines
.../mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts	0.23%	429 Missing ⚠️
...ckages/mermaid/src/diagrams/ishikawa/ishikawaDb.ts	0.00%	58 Missing ⚠️
.../mermaid/src/diagrams/ishikawa/ishikawaDetector.ts	7.69%	12 Missing ⚠️
...s/mermaid/src/diagrams/ishikawa/ishikawaDiagram.ts	8.33%	11 Missing ⚠️
...es/mermaid/src/diagrams/ishikawa/ishikawaStyles.ts	8.33%	11 Missing ⚠️
packages/examples/src/examples/ishikawa.ts	10.00%	9 Missing ⚠️
packages/examples/src/index.ts	0.00%	2 Missing ⚠️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00%	2 Missing ⚠️
.build/jsonSchema.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7387      +/-   ##
==========================================
- Coverage     3.58%   3.56%   -0.03%     
==========================================
  Files          482     490       +8     
  Lines        48121   48675     +554     
  Branches       758     765       +7     
==========================================
+ Hits          1726    1734       +8     
- Misses       46395   46941     +546     

Flag	Coverage Δ
unit	3.56% <1.47%> (-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	41.86% <100.00%> (+0.54%)	⬆️
...ges/mermaid/src/diagrams/ishikawa/ishikawaTypes.ts	100.00% <100.00%> (ø)
.build/jsonSchema.ts	0.00% <0.00%> (ø)
packages/examples/src/index.ts	2.00% <0.00%> (-0.09%)	⬇️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00% <0.00%> (ø)
packages/examples/src/examples/ishikawa.ts	10.00% <10.00%> (ø)
...s/mermaid/src/diagrams/ishikawa/ishikawaDiagram.ts	8.33% <8.33%> (ø)
...es/mermaid/src/diagrams/ishikawa/ishikawaStyles.ts	8.33% <8.33%> (ø)
.../mermaid/src/diagrams/ishikawa/ishikawaDetector.ts	7.69% <7.69%> (ø)
... and 2 more

... and 1 file with indirect coverage changes

🚀 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.

[lee-treehouse]

Hey @exoego this is really cool!

I tried it out with some data from https://en.wikipedia.org/wiki/Ishikawa_diagram and it looks great.

I noticed something about the order of the items. It seems in the top half of the diagram, they are displayed in reverse order. In the bottom half they are displayed in the order they were entered. Is it expected?

        ishikawa-beta
        Defect XXX
        Measurements
            Calibration
            Microscopes
            Inspectors
        Materials
            Alloys
            Lubricants
            Suppliers
        Personnel
            Shifts
            Training
            Operators
        Environment
            Humidity
            Temperature
        Methods
            Angle
            Engager
            Brake
        Machines
            Blade wear
            Speed

Additionally I noticed each section is displayed in a different order to how its entered in the syntax. I don't know if this is expected or not, but I thought I'd ask. actually I think it's in order, just a different order than I expected. seems the order relates to proximity to cause, which is clear from your example going from Cause 1 to Cause 6.

I'm new to this diagram type but it looks super useful!

[exoego]

Good catch.

Right now, the rendering order follows the internal logic: level 1 bones are drawn from the base of the spine up, which reverses the order for the top section compared to the Mermaid syntax.

I assume that Mermaid syntax should be WYSIWYG.
I'll modify the code so the rendering order matches the visual order of the text markup, as you assumed.

[lee-treehouse]

@exoego I'm not a maintainer though, just a fan of your PR, so please feel free to do what you think is right or the maintainers ask :) I think generally it is true that Mermaid syntax should be WYSIWYG.

[lee-treehouse]

@exoego I tried the new commit, looks great, thanks!

[lee-treehouse]

I tried replicating another chart I found from Google.. honestly the results are pretty awesome! really keen to see this merged

[knsv]

First of all — thank you so much for this contribution! The Ishikawa/fishbone diagram is one of the most requested diagram types, and it's really exciting to see it come together. The effort you've put into this is clear and appreciated.

I've done an initial review and have some feedback:

What's working well:

• The unit tests for parsing are great — solid foundation. I'd love to see more test cases added to cover edge cases, but the approach is spot on.
• Theme support working out of the box is excellent.
• The syntax is close to mindmaps and feels clean and intuitive.

Things to address:

1. Margins/padding: The diagram doesn't currently apply the configured margins. Take a look at the draw method in journeyDiagram as a reference — specifically how it adds padding and uses configureSvgSize. This ensures the diagram respects the user's configuration and renders consistently with other diagram types.
2. Visual regression tests: It would be really valuable to add visual snapshot tests. Check out cypress/rendering/xyz.spec.js for examples — it's surprisingly easy. You just add a diagram per test, and the image snapshot comparison catches any future regressions automatically. This is one of our most important quality safeguards across all diagram types.
3. Handdrawn mode: I noticed handdrawn/rough look isn't supported yet. This isn't necessarily a blocker for merging, but it should be documented so users know it's not available for this diagram type yet.

Looking forward to seeing this land. Great work!

[exoego]

@knsv Thanks for the detailed review.
Addressed:

1. Padding aefc970
2. Visual regression test c9446a4
3. Handdrawn look d022a49

[knsv]

Thanks @exoego Will look at it!

[knsv]

Great work @exoego - all three items from my previous review are addressed, and the handdrawn mode implementation went above and beyond. Really impressed by that.

What's working well:
The plugin contract is complete and properly structured — parser, db, renderer, styles, detector, and registration all present. DB is stateless per render, no cross-diagram imports, theme variables used throughout, text sanitization in place, docs with MERMAID_RELEASE_VERSION placeholder, and changeset included. Clean work.

Approving! Thanks for the thorough work on this, especially the visual regression test coverage and the full rough.js implementation. 🎉

[ashishjain0512]

@exoego Awesome work! Could resolve the conflicts, so that we can merge this and push out with our new release version.

[lee-treehouse]

So cool that this is out. There's no link to it yet on the sidebar so I've raised a PR to fix #7460