Skip to content

Commit 5959fc0

Browse files
ashishjain0512ashishjain0512
authored
Merge pull request #7387 from exoego/ishikawa-diagram
feat: Add Ishikawa diagram
2 parents 59bab4c + 52dfde9 commit 5959fc0

File tree

23 files changed

+1402
-14
lines changed

23 files changed

+1402
-14
lines changed

‎.build/jsonSchema.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
1919
'xyChart',
2020
'requirement',
2121
'mindmap',
22+
'ishikawa',
2223
'kanban',
2324
'timeline',
2425
'gitGraph',

‎.changeset/odd-crabs-bake.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@mermaid-js/examples': minor
3+
'mermaid': minor
4+
---
5+
6+
feat: Add Ishikawa diagram (ishikawa-beta)

‎cypress/integration/rendering/ishikawa.spec.ts‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { imgSnapshotTest, renderGraph } from '../../helpers/util';
2+
3+
describe('Ishikawa diagram', () => {
4+
it('1: should render a simple ishikawa diagram', () => {
5+
imgSnapshotTest(
6+
`ishikawa-beta
7+
Blurry Photo
8+
Process
9+
Out of focus
10+
User
11+
Shaky hands
12+
`
13+
);
14+
});
15+
16+
it('2: should render with many causes on both sides', () => {
17+
imgSnapshotTest(
18+
`ishikawa-beta
19+
Manufacturing Defect
20+
Machine
21+
Worn tooling
22+
Calibration
23+
Method
24+
Missing step
25+
Material
26+
Contamination
27+
Wrong grade
28+
Manpower
29+
Insufficient training
30+
`
31+
);
32+
});
33+
34+
it('3: should render with deeply nested causes', () => {
35+
imgSnapshotTest(
36+
`ishikawa-beta
37+
Server Outage
38+
Hardware
39+
Disk
40+
Bad sectors
41+
Full capacity
42+
Memory
43+
Leak detected
44+
Software
45+
Bug
46+
Race condition
47+
`
48+
);
49+
});
50+
51+
it('4: should render with a single cause', () => {
52+
imgSnapshotTest(
53+
`ishikawa-beta
54+
Problem
55+
Cause A
56+
`
57+
);
58+
});
59+
60+
it('5: should render with no children (root only)', () => {
61+
imgSnapshotTest(
62+
`ishikawa-beta
63+
Problem
64+
`
65+
);
66+
});
67+
68+
it('6: should render with handDrawn look', () => {
69+
imgSnapshotTest(
70+
`ishikawa-beta
71+
Blurry Photo
72+
Process
73+
Out of focus
74+
User
75+
Shaky hands
76+
`,
77+
{ look: 'handDrawn' }
78+
);
79+
});
80+
81+
it('7: should render with forest theme', () => {
82+
imgSnapshotTest(
83+
`ishikawa-beta
84+
Blurry Photo
85+
Process
86+
Out of focus
87+
User
88+
Shaky hands
89+
`,
90+
{ theme: 'forest' }
91+
);
92+
});
93+
94+
it('8: should render with dark theme', () => {
95+
imgSnapshotTest(
96+
`ishikawa-beta
97+
Blurry Photo
98+
Process
99+
Out of focus
100+
User
101+
Shaky hands
102+
`,
103+
{ theme: 'dark' }
104+
);
105+
});
106+
107+
it('9: should render with custom diagramPadding', () => {
108+
imgSnapshotTest(
109+
`ishikawa-beta
110+
Blurry Photo
111+
Process
112+
Out of focus
113+
User
114+
Shaky hands
115+
`,
116+
{ ishikawa: { diagramPadding: 50 } }
117+
);
118+
});
119+
120+
it('10: should render when useMaxWidth is true', () => {
121+
renderGraph(
122+
`ishikawa-beta
123+
Blurry Photo
124+
Process
125+
Out of focus
126+
User
127+
Shaky hands
128+
`,
129+
{ ishikawa: { useMaxWidth: true } }
130+
);
131+
cy.get('svg').should((svg) => {
132+
expect(svg).to.have.attr('width', '100%');
133+
const style = svg.attr('style');
134+
expect(style).to.match(/^max-width: [\d.]+px;$/);
135+
});
136+
});
137+
138+
it('11: should render when useMaxWidth is false', () => {
139+
renderGraph(
140+
`ishikawa-beta
141+
Blurry Photo
142+
Process
143+
Out of focus
144+
User
145+
Shaky hands
146+
`,
147+
{ ishikawa: { useMaxWidth: false } }
148+
);
149+
cy.get('svg').should((svg) => {
150+
const width = parseFloat(svg.attr('width')!);
151+
expect(width).to.be.greaterThan(0);
152+
const height = parseFloat(svg.attr('height')!);
153+
expect(height).to.be.greaterThan(0);
154+
expect(svg).to.not.have.attr('style');
155+
});
156+
});
157+
158+
it('12: should render a very deep nested diagram', () => {
159+
imgSnapshotTest(
160+
`ishikawa-beta
161+
Very deep
162+
Cause 1
163+
1-1
164+
1-2
165+
1-3
166+
1-3-1
167+
1-3-2
168+
1-3-3
169+
1-3-4
170+
Cause 2
171+
2-1
172+
2-1-1
173+
2-1-2
174+
2-2
175+
2-2-1
176+
2-2-2
177+
2-2-2-1
178+
2-2-2-1-1
179+
2-2-2-1-2
180+
2-2-2-1-2-1
181+
2-2-2-1
182+
2-3
183+
2-3-1
184+
Cause 3
185+
3-1
186+
3-1-1
187+
3-1-1-1
188+
3-1-1-1-1
189+
3-1-1-1-1-1
190+
3-1-1-1-1-1-1
191+
Cause 4
192+
4-1
193+
4-1-1
194+
4-1-2
195+
4-1-3
196+
4-1-4
197+
4-1-5
198+
4-1-6
199+
4-1-7
200+
4-1-8
201+
4-2
202+
4-2-1
203+
4-2-2
204+
Cause 5
205+
5-1
206+
Cause 6
207+
6-1
208+
6-2
209+
6-3
210+
6-4
211+
6-5
212+
6-6
213+
`
214+
);
215+
});
216+
});

‎demos/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@ <h2><a href="./journey.html">Journey</a></h2>
5555
<li>
5656
<h2><a href="./mindmap.html">Mindmap</a></h2>
5757
</li>
58+
<li>
59+
<h2><a href="./ishikawa.html">Ishikawa</a></h2>
60+
</li>
5861
<li>
5962
<h2><a href="./pie.html">Pie</a></h2>
6063
</li>

‎demos/ishikawa.html‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>Ishikawa Mermaid Quick Test Page</title>
7+
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
8+
<style>
9+
div.mermaid {
10+
font-family: 'Courier New', Courier, monospace !important;
11+
}
12+
</style>
13+
</head>
14+
15+
<body>
16+
<h1>Ishikawa diagram demo</h1>
17+
<pre class="mermaid">
18+
ishikawa-beta
19+
Blurry Photo
20+
Process
21+
Out of focus
22+
Shutter speed too slow
23+
Protective film not removed
24+
Beautification filter applied
25+
User
26+
Shaky hands
27+
Equipment
28+
LENS
29+
Inappropriate lens
30+
Damaged lens
31+
Dirty lens
32+
SENSOR
33+
Damaged sensor
34+
Dirty sensor
35+
Environment
36+
Subject moved too quickly
37+
Too dark
38+
</pre>
39+
40+
<pre class="mermaid">
41+
ishikawa-beta
42+
Problem Only
43+
</pre>
44+
45+
<pre class="mermaid">
46+
---
47+
config:
48+
ishikawa:
49+
diagramPadding: 100
50+
---
51+
ishikawa-beta
52+
Very deep
53+
Cause 1
54+
1-1
55+
1-2
56+
1-3
57+
1-3-1
58+
1-3-2
59+
1-3-3
60+
1-3-4
61+
Cause 2
62+
2-1
63+
2-1-1
64+
2-1-2
65+
2-2
66+
2-2-1
67+
2-2-2
68+
2-2-2-1
69+
2-2-2-1-1
70+
2-2-2-1-2
71+
2-2-2-1-2-1
72+
2-2-2-1
73+
2-3
74+
2-3-1
75+
Cause 3
76+
3-1
77+
3-1-1
78+
3-1-1-1
79+
3-1-1-1-1
80+
3-1-1-1-1-1
81+
3-1-1-1-1-1-1
82+
Cause 4
83+
4-1
84+
4-1-1
85+
4-1-2
86+
4-1-3
87+
4-1-4
88+
4-1-5
89+
4-1-6
90+
4-1-7
91+
4-1-8
92+
4-2
93+
4-2-1
94+
4-2-2
95+
Cause 5
96+
5-1
97+
Cause 6
98+
6-1
99+
6-2
100+
6-3
101+
6-4
102+
6-5
103+
6-6
104+
</pre>
105+
106+
<h2>Hand-drawn mode</h2>
107+
<pre class="mermaid">
108+
%%{init: { 'look': 'handDrawn', 'handDrawnSeed': 1 } }%%
109+
ishikawa-beta
110+
Blurry Photo
111+
Process
112+
Out of focus
113+
Shutter speed too slow
114+
User
115+
Shaky hands
116+
Equipment
117+
LENS
118+
Dirty lens
119+
SENSOR
120+
Damaged sensor
121+
Environment
122+
Too dark
123+
</pre>
124+
125+
<h2>Forest theme</h2>
126+
<pre class="mermaid">
127+
%%{init: { 'theme': 'forest' } }%%
128+
ishikawa-beta
129+
Low Test Coverage
130+
People
131+
Lack of training
132+
Insufficient reviewers
133+
Process
134+
No CI pipeline
135+
Skipping code review
136+
Tools
137+
Outdated test framework
138+
Flaky test runner
139+
Environment
140+
Tight deadlines
141+
Unclear requirements
142+
</pre>
143+
144+
<script type="module">
145+
import mermaid from './mermaid.esm.mjs';
146+
147+
mermaid.initialize({
148+
theme: 'base',
149+
startOnLoad: true,
150+
logLevel: 0,
151+
useMaxWidth: true,
152+
});
153+
</script>
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)