#4784 add ishikawa diagram #6679

DanielLipowicz · 2025-06-23T13:28:36Z

📑 Summary

Brief description about the content of your PR.

Resolves #

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 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:.

changeset-bot · 2025-06-23T13:28:39Z

⚠️ No Changeset found

Latest commit: b64a7cc

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

netlify · 2025-06-23T13:29:09Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`b64a7cc`
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/685a9c9029c4d70008c5b5e5
😎 Deploy Preview	https://deploy-preview-6679--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.

pkg-pr-new · 2025-06-23T13:29:45Z

Open in StackBlitz

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: b64a7cc

argos-ci · 2025-06-23T13:37:20Z

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

Build	Status	Details	Updated (UTC)
default (Inspect)	✅ No changes detected	-	Jun 24, 2025, 12:50 PM

codecov · 2025-06-24T12:30:46Z

Codecov Report

❌ Patch coverage is 0.63898% with 622 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.80%. Comparing base (e7970c6) to head (b64a7cc).
⚠️ Report is 480 commits behind head on develop.

Files with missing lines	Patch %	Lines
.../mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts	0.39%	253 Missing ⚠️
...ckages/mermaid/src/diagrams/ishikawa/ishikawaDb.ts	0.00%	166 Missing ⚠️
packages/mermaid/src/diagrams/ishikawa/svgDraw.ts	0.00%	133 Missing ⚠️
packages/mermaid/src/diagrams/ishikawa/styles.ts	0.00%	42 Missing ⚠️
packages/mermaid/src/diagrams/ishikawa/detector.ts	7.14%	13 Missing ⚠️
...rmaid/src/diagrams/ishikawa/ishikawa-definition.ts	10.00%	9 Missing ⚠️
...s/mermaid/src/diagram-api/diagram-orchestration.ts	0.00%	3 Missing ⚠️
.build/jsonSchema.ts	0.00%	1 Missing ⚠️
.../src/diagrams/architecture/architectureRenderer.ts	0.00%	1 Missing ⚠️
...ering-util/rendering-elements/shapes/stateStart.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6679      +/-   ##
==========================================
- Coverage     3.84%   3.80%   -0.05%     
==========================================
  Files          418     424       +6     
  Lines        43706   44318     +612     
  Branches       670     677       +7     
==========================================
+ Hits          1681    1685       +4     
- Misses       42025   42633     +608

Flag	Coverage Δ
unit	`3.80% <0.63%> (-0.05%)`	⬇️

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% <ø> (ø)`
...ges/mermaid/src/diagrams/ishikawa/ishikawaTypes.ts	`100.00% <100.00%> (ø)`
.build/jsonSchema.ts	`0.00% <0.00%> (ø)`
.../src/diagrams/architecture/architectureRenderer.ts	`0.00% <0.00%> (ø)`
...ering-util/rendering-elements/shapes/stateStart.ts	`0.00% <0.00%> (ø)`
...s/mermaid/src/diagram-api/diagram-orchestration.ts	`0.00% <0.00%> (ø)`
...rmaid/src/diagrams/ishikawa/ishikawa-definition.ts	`10.00% <10.00%> (ø)`
packages/mermaid/src/diagrams/ishikawa/detector.ts	`7.14% <7.14%> (ø)`
packages/mermaid/src/diagrams/ishikawa/styles.ts	`0.00% <0.00%> (ø)`
packages/mermaid/src/diagrams/ishikawa/svgDraw.ts	`0.00% <0.00%> (ø)`
... 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.

sidharthv96

Nice work @DanielLipowicz !

Need to make some minor changes

Update the PR description
Add -beta suffix to diagram identifier
Add examples
Add E2E tests in cypress/integration/rendering/ishikawa.spec.ts
Follow docs to add release version in docs
Add changeset
Fix orientation of the text, so it's centered inside the nodes

@ashishjain0512 @omkarht do we need to tweak the rendering logic to match the new setup?

sidharthv96 · 2025-08-19T18:24:52Z

packages/mermaid/src/diagrams/ishikawa/detector.ts

+const detector: DiagramDetector = (txt) => {
+  return /^\s*ishikawa/.test(txt);


Needs to be ishikawa-beta, please update the grammar as well.

sidharthv96 · 2025-08-19T18:26:10Z

packages/mermaid/src/diagrams/ishikawa/ishikawaDb.ts

+let nodes: IshikawaNode[] = [];
+let cnt = 0;
+let elements: Record<number, D3Element> = {};
+let problemStatement = '';
+let categories: string[] = [];


We need to use a class based approach for DB.

ref:

6691: update packet diagram to use new class-based DB approach #6804

6774: update architecture diagram to reflect new class-based DB structure #6803

sidharthv96 · 2025-08-19T18:26:28Z

packages/mermaid/src/diagrams/ishikawa/ishikawaDb.ts

+import defaultConfig from '../../defaultConfig.js';
+
+let nodes: IshikawaNode[] = [];
+let cnt = 0;


Suggested change

let cnt = 0;

let count = 0;

sidharthv96 · 2025-08-19T18:27:58Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+// Export for testing
+export { layoutFishbone };


Export function directly.

Suggested change

// Export for testing

export { layoutFishbone };

sidharthv96 · 2025-08-19T18:30:02Z

packages/mermaid/src/docs/syntax/ishikawa.md

+ishikawa
+problem "Product quality issues"
+category "Materials"
+  "Poor quality raw materials"
+  "Inconsistent suppliers"
+  "Storage problems"
+category "Methods"


We need to support unicode using the flowchart syntax

Copilot

Pull Request Overview

This pull request implements a new Ishikawa (fishbone) diagram feature for Mermaid, adding support for creating cause-and-effect diagrams commonly used in quality management and problem-solving.

Key changes:

Added complete Ishikawa diagram implementation with parser, renderer, and styling
Integrated the new diagram type into the Mermaid ecosystem with proper configuration support
Provided comprehensive documentation and demo examples

Reviewed Changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/mermaid/src/schemas/config.schema.yaml	Added configuration schema for Ishikawa diagrams
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts	Fixed TypeScript type assertion for D3 selection
packages/mermaid/src/docs/syntax/ishikawa.md	Added comprehensive documentation for Ishikawa diagram syntax
packages/mermaid/src/diagrams/ishikawa/svgDraw.ts	Implemented SVG drawing utilities for Ishikawa nodes
packages/mermaid/src/diagrams/ishikawa/styles.ts	Added CSS styling for Ishikawa diagrams
packages/mermaid/src/diagrams/ishikawa/parser/ishikawa.jison	Added JISON parser for Ishikawa diagram syntax
packages/mermaid/src/diagrams/ishikawa/ishikawaTypes.ts	Defined TypeScript interfaces for Ishikawa nodes
packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts	Implemented fishbone layout algorithm and rendering logic
packages/mermaid/src/diagrams/ishikawa/ishikawaDb.ts	Added database layer for managing Ishikawa diagram data
packages/mermaid/src/diagrams/ishikawa/ishikawa.spec.ts	Added comprehensive test suite for Ishikawa diagrams
packages/mermaid/src/diagrams/ishikawa/ishikawa-definition.ts	Created diagram definition for Ishikawa type
packages/mermaid/src/diagrams/ishikawa/detector.ts	Added diagram type detector for Ishikawa syntax
packages/mermaid/src/diagrams/architecture/architectureRenderer.ts	Fixed TypeScript type conflicts with cytoscape
packages/mermaid/src/diagram-api/diagram-orchestration.ts	Registered Ishikawa diagram in the orchestration system
packages/mermaid/src/config.type.ts	Added TypeScript configuration interface for Ishikawa diagrams
docs/syntax/ishikawa.md	Generated documentation file for Ishikawa diagrams
docs/config/setup/mermaid/interfaces/MermaidConfig.md	Updated configuration documentation
demos/ishikawa.html	Added interactive demo page for Ishikawa diagrams
demos/index.html	Added Ishikawa demo to main index

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-08-19T18:38:47Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+  const baseSpineLength = 1200; // Base length for reference
+  const lengthPerCategory = 200; // Additional length per category
+
+  return Math.max(minSpineLength, baseSpineLength + (categories.length - 3) * lengthPerCategory);


The magic number 3 in the spine length calculation lacks explanation. Consider adding a comment explaining why 3 categories is the reference point, or make it a named constant.

Suggested change

return Math.max(minSpineLength, baseSpineLength + (categories.length - 3) * lengthPerCategory);

const REFERENCE_CATEGORY_COUNT = 3; // Reference point: 3 categories is considered the baseline for spine length

return Math.max(minSpineLength, baseSpineLength + (categories.length - REFERENCE_CATEGORY_COUNT) * lengthPerCategory);

Copilot · 2025-08-19T18:38:48Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+function calculateCauseDistance(category: IshikawaNode, allCategories?: IshikawaNode[]): number {
+  const minDistance = 300; // Minimum distance from spine to category
+  const baseDistance = 400; // Base distance for reference
+  const distancePerSubCause = 50; // Additional distance per sub-cause


Magic numbers for distance calculations (300, 400, 50) should be extracted to named constants or made configurable through the diagram configuration.

Suggested change

const distancePerSubCause = 50; // Additional distance per sub-cause

const minDistance = MIN_CAUSE_DISTANCE;

const baseDistance = BASE_CAUSE_DISTANCE;

const distancePerSubCause = DISTANCE_PER_SUBCAUSE;

Copilot · 2025-08-19T18:38:48Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+
+  // Layout parameters for proper fishbone structure
+  const spineStartX = 100; // Left end of spine
+  const spineY = 400; // Center Y coordinate


Hard-coded positioning values (100, 400) should be extracted to named constants or made configurable to improve maintainability and allow customization.

Suggested change

const spineY = 400; // Center Y coordinate

const spineStartX = DEFAULT_SPINE_START_X; // Left end of spine

const spineY = DEFAULT_SPINE_Y; // Center Y coordinate

Copilot · 2025-08-19T18:38:48Z

packages/mermaid/src/diagrams/ishikawa/svgDraw.ts

+export const draw = (_text: string, _id: string, _version: string, _config: MermaidConfig) => {
+  // This function is not used in the current implementation
+  // The actual drawing is handled by the renderer
+};


The unused draw function should either be removed if not needed or properly implemented if it's part of the expected interface.

Suggested change

};

Copilot · 2025-08-19T18:38:49Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+
+        // Calculate distance from cause point (negative = left, positive = right)
+        const distanceFromCause = (pairIndex + 1) * (causeDistance * 0.3); // Use cause distance for spacing
+        const pairOffset = isFirstInPair ? 40 : -40; // 40px offset to make ribs opposite to each other


Magic numbers 0.3 and 40 in sub-cause positioning calculations should be extracted to named constants for better maintainability.

Suggested change

const pairOffset = isFirstInPair ? 40 : -40; // 40px offset to make ribs opposite to each other

const distanceFromCause = (pairIndex + 1) * (causeDistance * SUB_CAUSE_SPACING_FACTOR); // Use cause distance for spacing

const pairOffset = isFirstInPair ? SUB_CAUSE_PAIR_OFFSET : -SUB_CAUSE_PAIR_OFFSET; // Offset to make ribs opposite to each other

Copilot · 2025-08-19T18:38:49Z

packages/mermaid/src/diagrams/ishikawa/ishikawaRenderer.ts

+
+      // Calculate max sub-cause distance for all causes in this category
+      const maxSubCauses = Math.max(...causes.map((c) => (c.children ? c.children.length : 0)));
+      const causeDistance = Math.max(300, 400 + maxSubCauses * 50);


Duplicated distance calculation logic (300, 400, 50) should be refactored to use the existing calculateCauseDistance function to avoid code duplication.

Suggested change

const causeDistance = Math.max(300, 400 + maxSubCauses * 50);

// Calculate cause distance using the existing function to avoid duplication

const causeDistance = calculateCauseDistance(cause, causes);

4784 add ishikawa diagram

49464ea

DanielLipowicz changed the title ~~4784 add ishikawa diagram~~ #4784 add ishikawa diagram Jun 23, 2025

4784 add ishikawa diagram

24aee05

DanielLipowicz and others added 4 commits June 23, 2025 16:01

4784 fixing pnpm run docs:build

287c690

4784 fixing unit tests

a6efa19

4784 fixing unit tests

b6f80dd

[autofix.ci] apply automated fixes

4859bdf

Merge branch 'develop' into 4784-add-ishikawa-diagram

b64a7cc

sidharthv96 requested changes Aug 19, 2025

View reviewed changes

sidharthv96 requested review from ashishjain0512, omkarht, shubhamparikh2704 and Copilot August 19, 2025 18:37

Copilot AI reviewed Aug 19, 2025

View reviewed changes

		const detector: DiagramDetector = (txt) => {
		return /^\s*ishikawa/.test(txt);

-  return Math.max(minSpineLength, baseSpineLength + (categories.length - 3) * lengthPerCategory);
+  const REFERENCE_CATEGORY_COUNT = 3; // Reference point: 3 categories is considered the baseline for spine length
+  return Math.max(minSpineLength, baseSpineLength + (categories.length - REFERENCE_CATEGORY_COUNT) * lengthPerCategory);

-  const distancePerSubCause = 50; // Additional distance per sub-cause
+  const minDistance = MIN_CAUSE_DISTANCE;
+  const baseDistance = BASE_CAUSE_DISTANCE;
+  const distancePerSubCause = DISTANCE_PER_SUBCAUSE;

	const spineY = 400; // Center Y coordinate
	const spineStartX = DEFAULT_SPINE_START_X; // Left end of spine
	const spineY = DEFAULT_SPINE_Y; // Center Y coordinate

	const pairOffset = isFirstInPair ? 40 : -40; // 40px offset to make ribs opposite to each other
	const distanceFromCause = (pairIndex + 1) * (causeDistance * SUB_CAUSE_SPACING_FACTOR); // Use cause distance for spacing
	const pairOffset = isFirstInPair ? SUB_CAUSE_PAIR_OFFSET : -SUB_CAUSE_PAIR_OFFSET; // Offset to make ribs opposite to each other

	const causeDistance = Math.max(300, 400 + maxSubCauses * 50);
	// Calculate cause distance using the existing function to avoid duplication
	const causeDistance = calculateCauseDistance(cause, causes);

Uh oh!

#4784 add ishikawa diagram #6679

Are you sure you want to change the base?

#4784 add ishikawa diagram #6679

Conversation

DanielLipowicz commented Jun 23, 2025

📑 Summary

📏 Design Decisions

📋 Tasks

Uh oh!

changeset-bot bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

netlify bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for mermaid-js ready!

Uh oh!

pkg-pr-new bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

argos-ci bot commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

sidharthv96 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

sidharthv96 Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

changeset-bot bot commented Jun 23, 2025 •

edited

Loading

netlify bot commented Jun 23, 2025 •

edited

Loading

pkg-pr-new bot commented Jun 23, 2025 •

edited

Loading

argos-ci bot commented Jun 23, 2025 •

edited

Loading

codecov bot commented Jun 24, 2025 •

edited

Loading

sidharthv96 left a comment •

edited

Loading