Skip to content

Commit 75ead98

Browse files
ad1992ad1992
authored
feat: support sequence diagrams 🚀 (#34)
* feat: support sequence diagrams * remove endArrowhead for solid and dotted stroke styles * cleanup playground UI * add some sequence testcases and support name attribute in test cases * add playground for sequence * support actor symbols * display correct text message * fix types and use mermaid font size as is for better calculations * support identifiers * add test cases for identifier and also beautify playground a bit :p * support notes * support activations * fix message * Support loops * support alternate paths and add bg to loop labels * Add testcase for parallel actions * calculate width of container based on label for loop labels * Add a testcase for comment * support critical regions and self loop * use svg for arrow text as json is not consistent * support background highlights * use message json for computing arrowtype * use note text from message json * make sure critical label doesn't overlap with loop text * remove font customization * support box/grouping * group the actor symbols * support sequence numbers * support grouping for actors too and move away from mermaid group rect instead draw ours :) * move computeGroupIds to flowchart as its flowchart specific * assign frame id to bound text elements * upgrade exclaidraw * fix styling * cleanup * support entity codes * update excalidraw package to use the frames api * stop using directive as we don't support custom font size hence using config * make code more typesafe * update changelog and make more typesafe * remove unused code * update changelog * upgrade version to 0.1.2
1 parent 2995f11 commit 75ead98

22 files changed

Lines changed: 1389 additions & 217 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
.env.development.local
2222
.env.test.local
2323
.env.production.local
24+
.vscode
2425

2526
npm-debug.log*
2627
yarn-debug.log*

‎CHANGELOG.md‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
1+
## 0.1.2 (2023-11-03)
2+
3+
## Library
4+
5+
### Features
6+
7+
- Support Sequence Diagrams [#34](https://github.com/excalidraw/mermaid-to-excalidraw/pull/34) by [@ad1992](https://github.com/ad1992).
8+
9+
## Playground
10+
11+
**_This section lists the updates made to the playground and will not affect the integration._**
12+
13+
### Chore
14+
15+
- Adding an example of Complex Decisions & Subprocesses Charts in playground [#31](https://github.com/excalidraw/mermaid-to-excalidraw/pull/31) by [@DYNAMICMORTAL](https://github.com/DYNAMICMORTAL).
16+
117
## 0.1.1 (2023-09-21)
218

319
### Fixes
420

5-
- Support module resolution nodenext so type module works in host [#30](https://github.com/excalidraw/mermaid-to-excalidraw/pull/30) by [@ad1992](https://github.com/ad1992)
21+
- Support module resolution nodenext so type module works in host [#30](https://github.com/excalidraw/mermaid-to-excalidraw/pull/30) by [@ad1992](https://github.com/ad1992).
622

723
### Build
824

9-
- Don't minify build output [#29](https://github.com/excalidraw/mermaid-to-excalidraw/pull/29) by [@ad1992](https://github.com/ad1992)
25+
- Don't minify build output [#29](https://github.com/excalidraw/mermaid-to-excalidraw/pull/29) by [@ad1992](https://github.com/ad1992).
1026

1127
### Chore
1228

13-
- use excalidraw v0.16.0 [#28](https://github.com/excalidraw/mermaid-to-excalidraw/pull/28) by [@ad1992](https://github.com/ad1992)
29+
- use excalidraw v0.16.0 [#28](https://github.com/excalidraw/mermaid-to-excalidraw/pull/28) by [@ad1992](https://github.com/ad1992).
1430

1531
## 0.1.0 (2023-09-13)
1632

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@excalidraw/mermaid-to-excalidraw",
3-
"version": "0.1.1",
3+
"version": "0.1.2",
44
"description": "Mermaid to Excalidraw Diagrams",
55
"main": "dist/index.js",
66
"types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
2727
"devDependencies": {
2828
"@babel/core": "7.12.0",
2929
"@excalidraw/eslint-config": "1.0.3",
30-
"@excalidraw/excalidraw": "0.16.0",
30+
"@excalidraw/excalidraw": "0.16.1-6920-d3d0bd0",
3131
"@parcel/transformer-sass": "2.9.1",
3232
"@types/mermaid": "9.2.0",
3333
"@types/react": "18.2.14",

‎playground/index.html‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,26 @@
99
<body>
1010
<section id="custom-test">
1111
<h1>Custom Test</h1>
12-
<ul>
13-
<li>
14-
Support only flowchart diagram (the input must started with
15-
"flowchart")
16-
</li>
17-
<li>
18-
See supported and unsupported features at
19-
<a
20-
target="_blank"
21-
href="https://github.com/excalidraw/mermaid-to-excalidraw/pull/1#issue-1686226562"
22-
>PR's description</a
23-
>
24-
</li>
25-
</ul>
12+
Supports only
13+
<a target="_blank" href="https://mermaid.js.org/syntax/flowchart.html"
14+
>Flowchart</a
15+
>
16+
and
17+
<a
18+
target="_blank"
19+
href="https://mermaid.js.org/syntax/sequenceDiagram.html"
20+
>
21+
Sequence </a
22+
>diagrams.
2623
<br />
2724
<textarea
2825
id="mermaid-input"
2926
rows="10"
3027
cols="50"
28+
style="margin-top: 1rem"
3129
placeholder="Input Mermaid Syntax"
3230
></textarea
3331
><br />
34-
<label for="font-size-input">Custom Font Size: </label>
35-
<input type="number" id="font-size-input" value="20" /><br />
3632
<button id="render-excalidraw-btn">Render to Excalidraw</button>
3733
<div id="custom-diagram"></div>
3834
<details id="parsed-data-details">
@@ -48,8 +44,23 @@ <h1>Custom Test</h1>
4844
id="diagram-loading-spinner"
4945
width="50"
5046
/>
51-
<div id="flowchart-container"></div>
52-
<div id="unsupported"></div>
47+
<h2>Flowchart Diagrams</h2>
48+
<details>
49+
<summary>Flowchart Examples</summary>
50+
<div id="flowchart-container"></div>
51+
</details>
52+
53+
<h2>Sequence Diagrams</h2>
54+
<details>
55+
<summary>Sequence Diagram Examples</summary>
56+
<div id="sequence-container"></div>
57+
</details>
58+
<h2 style="margin-top: 50px">Unsupported diagrams</h2>
59+
<details>
60+
<summary>Unsupported Diagram Examples</summary>
61+
<div id="unsupported"></div>
62+
</details>
63+
5364
<script
5465
crossorigin
5566
src="https://unpkg.com/react@18/umd/react.development.js"
@@ -60,7 +71,7 @@ <h1>Custom Test</h1>
6071
></script>
6172
<script
6273
crossorigin
63-
src="https://unpkg.com/@excalidraw/excalidraw@0.16.0/dist/excalidraw.development.js"
74+
src="https://unpkg.com/@excalidraw/excalidraw@0.16.1-6920-d3d0bd0/dist/excalidraw.development.js"
6475
></script>
6576
<script type="module" src="index.ts"></script>
6677
</body>

‎playground/index.ts‎

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,46 @@ mermaid.initialize({ startOnLoad: false });
99

1010
import "./initCustomTest";
1111
import { renderExcalidraw } from "./initExcalidraw.js";
12+
import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.js";
1213

14+
let indexOffset = 0;
1315
(async () => {
1416
// Render flowchart diagrams
1517
const flowchartContainer = document.getElementById("flowchart-container")!;
16-
document.body.appendChild(flowchartContainer);
1718
await Promise.all(
18-
FLOWCHART_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
19-
return renderDiagram(flowchartContainer, diagramDefinition, i);
19+
FLOWCHART_DIAGRAM_TESTCASES.map((defination, index) => {
20+
const name = `Test ${index + 1}`;
21+
return renderDiagram(flowchartContainer, name, defination, index);
2022
})
2123
);
22-
24+
indexOffset += FLOWCHART_DIAGRAM_TESTCASES.length;
25+
// Render Sequence diagrams
26+
const sequenceContainer = document.getElementById("sequence-container")!;
27+
await Promise.all(
28+
SEQUENCE_DIAGRAM_TESTCASES.map(({ name, defination }, index) => {
29+
return renderDiagram(
30+
sequenceContainer,
31+
name,
32+
defination,
33+
index + indexOffset
34+
);
35+
})
36+
);
37+
indexOffset += SEQUENCE_DIAGRAM_TESTCASES.length;
2338
// Render unsupported diagrams
2439
const unsupportedContainer = document.getElementById("unsupported")!;
2540
unsupportedContainer.innerHTML = `
26-
<h1 style="margin-top: 50px">Unsupported diagrams</h1>
2741
<p>Unsupported diagram will be rendered as SVG image.</p>
2842
`;
29-
const indexOffset = FLOWCHART_DIAGRAM_TESTCASES.length;
30-
document.body.appendChild(unsupportedContainer);
3143
await Promise.all(
32-
UNSUPPORTED_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
44+
UNSUPPORTED_DIAGRAM_TESTCASES.map((testcase, index) => {
45+
const { name, defination } = testcase;
46+
3347
return renderDiagram(
3448
unsupportedContainer,
35-
diagramDefinition,
36-
i + indexOffset
49+
name,
50+
defination,
51+
index + indexOffset
3752
);
3853
})
3954
);
@@ -44,30 +59,31 @@ import { renderExcalidraw } from "./initExcalidraw.js";
4459

4560
async function renderDiagram(
4661
containerEl: HTMLElement,
62+
name: string,
4763
diagramDefinition: string,
4864
i: number
4965
) {
5066
const diagramContainerEl = document.createElement("div");
5167
diagramContainerEl.id = `diagram-container-${i}`;
52-
diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px">Test #${i + 1}
68+
diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px; color:#f06595;">${name}
5369
</h2>
54-
<div id="diagram-${i}"></div>
70+
71+
<pre style="font-size:16px; font-weight:600;font-style:italic;background:#eeeef1;width:40vw;padding:5px" id="mermaid-syntax-${i}"></pre>
72+
5573
<button id="diagram-btn-${i}" data="${i}">Render to Excalidraw</button>
56-
<details style="margin-top: 20px">
57-
<summary>Mermaid syntax</summary>
58-
<pre id="mermaid-syntax-${i}"></pre>
59-
</details>
74+
<div id="diagram-${i}" style="width:50%"></div>
75+
6076
<details style="margin-top: 10px">
61-
<summary>Parsed data from parseMermaid</summary>
62-
<pre id="parsed-${i}"></pre>
77+
<summary>View Parsed data from parseMermaid</summary>
78+
<pre style="font-size:16px; background:#eeeef1;width:40vw;padding:5px" id="parsed-${i}"></pre>
6379
</details>`;
6480

6581
const btn = diagramContainerEl.querySelector(`#diagram-btn-${i}`)!;
6682

6783
btn.addEventListener("click", async () => {
6884
const data = btn.getAttribute("data");
6985
const pd = document.getElementById(`parsed-${data}`)!;
70-
renderExcalidraw(pd.innerHTML);
86+
renderExcalidraw(pd.textContent!);
7187
});
7288

7389
const diagramEl = diagramContainerEl.querySelector(`#diagram-${i}`)!;
@@ -87,10 +103,7 @@ async function renderDiagram(
87103

88104
// Get parsed data
89105
try {
90-
const data = await parseMermaid(diagramDefinition, {
91-
fontSize: DEFAULT_FONT_SIZE,
92-
});
93-
106+
const data = await parseMermaid(diagramDefinition);
94107
const parsedDataViewerEl = diagramContainerEl.querySelector(
95108
`#parsed-${i}`
96109
)!;

‎playground/initCustomTest.ts‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,31 +14,22 @@ btn.addEventListener("click", async () => {
1414
const mermaidInput = document.getElementById(
1515
"mermaid-input"
1616
) as HTMLInputElement;
17-
const fontSizeInput = document.getElementById(
18-
"font-size-input"
19-
) as HTMLInputElement;
2017

2118
const diagramDefinition = mermaidInput.value;
22-
const customFontSize = Number(fontSizeInput.value);
2319

2420
// Render Mermaid diagram
2521
const diagramEl = document.getElementById("custom-diagram")!;
26-
const { svg } = await mermaid.render(
27-
`custom-digaram`,
28-
`%%{init: {"themeVariables": {"fontSize": "${customFontSize}px"}} }%%\n${diagramDefinition}`
29-
);
22+
const { svg } = await mermaid.render("custom-digaram", diagramDefinition);
3023
diagramEl.innerHTML = svg;
3124

3225
// Parse Mermaid diagram and render to Excalidraw
33-
const parsedData = await parseMermaid(diagramDefinition, {
34-
fontSize: customFontSize,
35-
});
26+
const parsedData = await parseMermaid(diagramDefinition);
3627

3728
const parsedDataEl = document.getElementById("custom-parsed-data")!;
3829
parsedDataEl.parentElement!.style.display = "block";
3930
parsedDataEl.innerText = JSON.stringify(parsedData, null, 2);
4031

41-
renderExcalidraw(JSON.stringify(parsedData), customFontSize);
32+
renderExcalidraw(JSON.stringify(parsedData));
4233
} catch (e) {
4334
errorEl.setAttribute("style", "display: block");
4435
errorEl.innerHTML = String(e);

‎playground/style.scss‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,16 @@ body {
66
max-width: 48%;
77
}
88
}
9-
9+
button {
10+
height: 40px;
11+
font-size: 16px;
12+
background: #4dabf7;
13+
border: 1px solid #a5d8ff;
14+
box-shadow: none;
15+
border-radius: 2px;
16+
color: white;
17+
cursor: pointer;
18+
}
1019
#excalidraw {
1120
width: 50vw;
1221
height: 100vh;
@@ -46,3 +55,9 @@ body {
4655
margin-top: 20px;
4756
}
4857
}
58+
59+
a {
60+
color: #0071ce;
61+
font-weight: 600;
62+
text-decoration: none;
63+
}

0 commit comments

Comments
 (0)