feat: Add Ishikawa diagram

.build/jsonSchema.ts

@@ -19,6 +19,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'xyChart',
   'requirement',
   'mindmap',
+  'ishikawa',
   'kanban',
   'timeline',
   'gitGraph',

.changeset/odd-crabs-bake.md

@@ -0,0 +1,6 @@
+---
+'@mermaid-js/examples': minor
+'mermaid': minor
+---
+
+feat: Add Ishikawa diagram (ishikawa-beta)

cypress/integration/rendering/ishikawa.spec.ts

@@ -0,0 +1,216 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+
+describe('Ishikawa diagram', () => {
+  it('1: should render a simple ishikawa diagram', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `
+    );
+  });
+
+  it('2: should render with many causes on both sides', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Manufacturing Defect
+        Machine
+            Worn tooling
+            Calibration
+        Method
+            Missing step
+        Material
+            Contamination
+            Wrong grade
+        Manpower
+            Insufficient training
+      `
+    );
+  });
+
+  it('3: should render with deeply nested causes', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Server Outage
+        Hardware
+            Disk
+                Bad sectors
+                Full capacity
+            Memory
+                Leak detected
+        Software
+            Bug
+                Race condition
+      `
+    );
+  });
+
+  it('4: should render with a single cause', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Problem
+        Cause A
+      `
+    );
+  });
+
+  it('5: should render with no children (root only)', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Problem
+      `
+    );
+  });
+
+  it('6: should render with handDrawn look', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { look: 'handDrawn' }
+    );
+  });
+
+  it('7: should render with forest theme', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { theme: 'forest' }
+    );
+  });
+
+  it('8: should render with dark theme', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { theme: 'dark' }
+    );
+  });
+
+  it('9: should render with custom diagramPadding', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { ishikawa: { diagramPadding: 50 } }
+    );
+  });
+
+  it('10: should render when useMaxWidth is true', () => {
+    renderGraph(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { ishikawa: { useMaxWidth: true } }
+    );
+    cy.get('svg').should((svg) => {
+      expect(svg).to.have.attr('width', '100%');
+      const style = svg.attr('style');
+      expect(style).to.match(/^max-width: [\d.]+px;$/);
+    });
+  });
+
+  it('11: should render when useMaxWidth is false', () => {
+    renderGraph(
+      `ishikawa-beta
+    Blurry Photo
+        Process
+            Out of focus
+        User
+            Shaky hands
+      `,
+      { ishikawa: { useMaxWidth: false } }
+    );
+    cy.get('svg').should((svg) => {
+      const width = parseFloat(svg.attr('width')!);
+      expect(width).to.be.greaterThan(0);
+      const height = parseFloat(svg.attr('height')!);
+      expect(height).to.be.greaterThan(0);
+      expect(svg).to.not.have.attr('style');
+    });
+  });
+
+  it('12: should render a very deep nested diagram', () => {
+    imgSnapshotTest(
+      `ishikawa-beta
+    Very deep
+    Cause 1
+      1-1
+      1-2
+      1-3
+          1-3-1
+          1-3-2
+          1-3-3
+          1-3-4
+    Cause 2
+      2-1
+        2-1-1
+        2-1-2
+      2-2
+        2-2-1
+        2-2-2
+          2-2-2-1
+            2-2-2-1-1
+            2-2-2-1-2
+              2-2-2-1-2-1
+          2-2-2-1
+      2-3
+        2-3-1
+    Cause 3
+       3-1
+         3-1-1
+            3-1-1-1
+              3-1-1-1-1
+                3-1-1-1-1-1
+                  3-1-1-1-1-1-1
+    Cause 4
+        4-1
+          4-1-1
+          4-1-2
+          4-1-3
+          4-1-4
+          4-1-5
+          4-1-6
+          4-1-7
+          4-1-8
+        4-2
+          4-2-1
+          4-2-2
+    Cause 5
+        5-1
+    Cause 6
+        6-1
+        6-2
+        6-3
+        6-4
+        6-5
+        6-6
+      `
+    );
+  });
+});

demos/index.html

@@ -55,6 +55,9 @@ <h2><a href="./journey.html">Journey</a></h2>
       <li>
         <h2><a href="./mindmap.html">Mindmap</a></h2>
       </li>
+      <li>
+        <h2><a href="./ishikawa.html">Ishikawa</a></h2>
+      </li>
       <li>
         <h2><a href="./pie.html">Pie</a></h2>
       </li>

demos/ishikawa.html

@@ -0,0 +1,155 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Ishikawa Mermaid Quick Test Page</title>
+    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+    <style>
+      div.mermaid {
+        font-family: 'Courier New', Courier, monospace !important;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>Ishikawa diagram demo</h1>
+    <pre class="mermaid">
+ishikawa-beta
+  Blurry Photo
+  Process
+    Out of focus
+    Shutter speed too slow
+    Protective film not removed
+    Beautification filter applied
+  User
+    Shaky hands
+  Equipment
+    LENS
+      Inappropriate lens
+      Damaged lens
+      Dirty lens
+    SENSOR
+      Damaged sensor
+      Dirty sensor
+  Environment
+    Subject moved too quickly
+    Too dark
+    </pre>
+
+    <pre class="mermaid">
+ishikawa-beta
+  Problem Only
+    </pre>
+
+    <pre class="mermaid">
+---
+config:
+  ishikawa:
+    diagramPadding: 100
+---
+ishikawa-beta
+  Very deep
+  Cause 1
+    1-1
+    1-2
+    1-3
+        1-3-1
+        1-3-2
+        1-3-3
+        1-3-4
+  Cause 2
+    2-1
+      2-1-1
+      2-1-2
+    2-2
+      2-2-1
+      2-2-2
+        2-2-2-1
+          2-2-2-1-1
+          2-2-2-1-2
+            2-2-2-1-2-1
+        2-2-2-1
+    2-3
+      2-3-1
+  Cause 3
+     3-1
+       3-1-1
+          3-1-1-1
+            3-1-1-1-1
+              3-1-1-1-1-1
+                3-1-1-1-1-1-1
+  Cause 4
+      4-1
+        4-1-1
+        4-1-2
+        4-1-3
+        4-1-4
+        4-1-5
+        4-1-6
+        4-1-7
+        4-1-8
+      4-2
+        4-2-1
+        4-2-2
+  Cause 5
+      5-1
+  Cause 6
+      6-1
+      6-2
+      6-3
+      6-4
+      6-5
+      6-6
+    </pre>
+
+    <h2>Hand-drawn mode</h2>
+    <pre class="mermaid">
+%%{init: { 'look': 'handDrawn', 'handDrawnSeed': 1 } }%%
+ishikawa-beta
+  Blurry Photo
+  Process
+    Out of focus
+    Shutter speed too slow
+  User
+    Shaky hands
+  Equipment
+    LENS
+      Dirty lens
+    SENSOR
+      Damaged sensor
+  Environment
+    Too dark
+    </pre>
+
+    <h2>Forest theme</h2>
+    <pre class="mermaid">
+%%{init: { 'theme': 'forest' } }%%
+ishikawa-beta
+  Low Test Coverage
+  People
+    Lack of training
+    Insufficient reviewers
+  Process
+    No CI pipeline
+    Skipping code review
+  Tools
+    Outdated test framework
+    Flaky test runner
+  Environment
+    Tight deadlines
+    Unclear requirements
+    </pre>
+
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+
+      mermaid.initialize({
+        theme: 'base',
+        startOnLoad: true,
+        logLevel: 0,
+        useMaxWidth: true,
+      });
+    </script>
+  </body>
+</html>