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
excalidraw · Nov 3, 2023 · 75ead98 · 75ead98 · vercel · Nov 3, 2023
1 parent 2995f11
commit 75ead98
Show file tree

Hide file tree

Showing 22 changed files with 1,389 additions and 217 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,32 @@
+## 0.1.2 (2023-11-03)
+
+## Library
+
+### Features
+
+- Support Sequence Diagrams [#34](https://github.com/excalidraw/mermaid-to-excalidraw/pull/34) by [@ad1992](https://github.com/ad1992).
+
+## Playground
+
+**_This section lists the updates made to the playground and will not affect the integration._**
+
+### Chore
+
+- 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).
+
 ## 0.1.1 (2023-09-21)
 
 ### Fixes
 
-- 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)
+- 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).
 
 ### Build
 
-- Don't minify build output [#29](https://github.com/excalidraw/mermaid-to-excalidraw/pull/29) by [@ad1992](https://github.com/ad1992)
+- Don't minify build output [#29](https://github.com/excalidraw/mermaid-to-excalidraw/pull/29) by [@ad1992](https://github.com/ad1992).
 
 ### Chore
 
-- use excalidraw v0.16.0 [#28](https://github.com/excalidraw/mermaid-to-excalidraw/pull/28) by [@ad1992](https://github.com/ad1992)
+- use excalidraw v0.16.0 [#28](https://github.com/excalidraw/mermaid-to-excalidraw/pull/28) by [@ad1992](https://github.com/ad1992).
 
 ## 0.1.0 (2023-09-13)
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/mermaid-to-excalidraw",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Mermaid to Excalidraw Diagrams",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@babel/core": "7.12.0",
     "@excalidraw/eslint-config": "1.0.3",
-    "@excalidraw/excalidraw": "0.16.0",
+    "@excalidraw/excalidraw": "0.16.1-6920-d3d0bd0",
     "@parcel/transformer-sass": "2.9.1",
     "@types/mermaid": "9.2.0",
     "@types/react": "18.2.14",

diff --git a/playground/index.html b/playground/index.html
@@ -9,30 +9,26 @@
   <body>
     <section id="custom-test">
       <h1>Custom Test</h1>
-      <ul>
-        <li>
-          Support only flowchart diagram (the input must started with
-          "flowchart")
-        </li>
-        <li>
-          See supported and unsupported features at
-          <a
-            target="_blank"
-            href="https://github.com/excalidraw/mermaid-to-excalidraw/pull/1#issue-1686226562"
-            >PR's description</a
-          >
-        </li>
-      </ul>
+      Supports only
+      <a target="_blank" href="https://mermaid.js.org/syntax/flowchart.html"
+        >Flowchart</a
+      >
+      and
+      <a
+        target="_blank"
+        href="https://mermaid.js.org/syntax/sequenceDiagram.html"
+      >
+        Sequence </a
+      >diagrams.
       <br />
       <textarea
         id="mermaid-input"
         rows="10"
         cols="50"
+        style="margin-top: 1rem"
         placeholder="Input Mermaid Syntax"
       ></textarea
       ><br />
-      <label for="font-size-input">Custom Font Size: </label>
-      <input type="number" id="font-size-input" value="20" /><br />
       <button id="render-excalidraw-btn">Render to Excalidraw</button>
       <div id="custom-diagram"></div>
       <details id="parsed-data-details">
@@ -48,8 +44,23 @@ <h1>Custom Test</h1>
       id="diagram-loading-spinner"
       width="50"
     />
-    <div id="flowchart-container"></div>
-    <div id="unsupported"></div>
+    <h2>Flowchart Diagrams</h2>
+    <details>
+      <summary>Flowchart Examples</summary>
+      <div id="flowchart-container"></div>
+    </details>
+
+    <h2>Sequence Diagrams</h2>
+    <details>
+      <summary>Sequence Diagram Examples</summary>
+      <div id="sequence-container"></div>
+    </details>
+    <h2 style="margin-top: 50px">Unsupported diagrams</h2>
+    <details>
+      <summary>Unsupported Diagram Examples</summary>
+      <div id="unsupported"></div>
+    </details>
+
     <script
       crossorigin
       src="https://unpkg.com/react@18/umd/react.development.js"
@@ -60,7 +71,7 @@ <h1>Custom Test</h1>
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/@excalidraw/[email protected].0/dist/excalidraw.development.js"
+      src="https://unpkg.com/@excalidraw/[email protected].1-6920-d3d0bd0/dist/excalidraw.development.js"
     ></script>
     <script type="module" src="index.ts"></script>
   </body>

diff --git a/playground/index.ts b/playground/index.ts
@@ -9,31 +9,46 @@ mermaid.initialize({ startOnLoad: false });
 
 import "./initCustomTest";
 import { renderExcalidraw } from "./initExcalidraw.js";
+import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.js";
 
+let indexOffset = 0;
 (async () => {
   // Render flowchart diagrams
   const flowchartContainer = document.getElementById("flowchart-container")!;
-  document.body.appendChild(flowchartContainer);
   await Promise.all(
-    FLOWCHART_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
-      return renderDiagram(flowchartContainer, diagramDefinition, i);
+    FLOWCHART_DIAGRAM_TESTCASES.map((defination, index) => {
+      const name = `Test ${index + 1}`;
+      return renderDiagram(flowchartContainer, name, defination, index);
     })
   );
-
+  indexOffset += FLOWCHART_DIAGRAM_TESTCASES.length;
+  // Render Sequence diagrams
+  const sequenceContainer = document.getElementById("sequence-container")!;
+  await Promise.all(
+    SEQUENCE_DIAGRAM_TESTCASES.map(({ name, defination }, index) => {
+      return renderDiagram(
+        sequenceContainer,
+        name,
+        defination,
+        index + indexOffset
+      );
+    })
+  );
+  indexOffset += SEQUENCE_DIAGRAM_TESTCASES.length;
   // Render unsupported diagrams
   const unsupportedContainer = document.getElementById("unsupported")!;
   unsupportedContainer.innerHTML = `
-      <h1 style="margin-top: 50px">Unsupported diagrams</h1>
       <p>Unsupported diagram will be rendered as SVG image.</p>
     `;
-  const indexOffset = FLOWCHART_DIAGRAM_TESTCASES.length;
-  document.body.appendChild(unsupportedContainer);
   await Promise.all(
-    UNSUPPORTED_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
+    UNSUPPORTED_DIAGRAM_TESTCASES.map((testcase, index) => {
+      const { name, defination } = testcase;
+
       return renderDiagram(
         unsupportedContainer,
-        diagramDefinition,
-        i + indexOffset
+        name,
+        defination,
+        index + indexOffset
       );
     })
   );
@@ -44,30 +59,31 @@ import { renderExcalidraw } from "./initExcalidraw.js";
 
 async function renderDiagram(
   containerEl: HTMLElement,
+  name: string,
   diagramDefinition: string,
   i: number
 ) {
   const diagramContainerEl = document.createElement("div");
   diagramContainerEl.id = `diagram-container-${i}`;
-  diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px">Test #${i + 1}
+  diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px; color:#f06595;">${name}
   </h2>
-  <div id="diagram-${i}"></div>
+  
+  <pre style="font-size:16px; font-weight:600;font-style:italic;background:#eeeef1;width:40vw;padding:5px" id="mermaid-syntax-${i}"></pre>
+
   <button id="diagram-btn-${i}" data="${i}">Render to Excalidraw</button>
-  <details style="margin-top: 20px">
-    <summary>Mermaid syntax</summary>
-    <pre id="mermaid-syntax-${i}"></pre>
-  </details>
+  <div id="diagram-${i}" style="width:50%"></div>
+
   <details style="margin-top: 10px">
-    <summary>Parsed data from parseMermaid</summary>
-    <pre id="parsed-${i}"></pre>
+    <summary>View Parsed data from parseMermaid</summary>
+    <pre style="font-size:16px; background:#eeeef1;width:40vw;padding:5px"  id="parsed-${i}"></pre>
   </details>`;
 
   const btn = diagramContainerEl.querySelector(`#diagram-btn-${i}`)!;
 
   btn.addEventListener("click", async () => {
     const data = btn.getAttribute("data");
     const pd = document.getElementById(`parsed-${data}`)!;
-    renderExcalidraw(pd.innerHTML);
+    renderExcalidraw(pd.textContent!);
   });
 
   const diagramEl = diagramContainerEl.querySelector(`#diagram-${i}`)!;
@@ -87,10 +103,7 @@ async function renderDiagram(
 
   // Get parsed data
   try {
-    const data = await parseMermaid(diagramDefinition, {
-      fontSize: DEFAULT_FONT_SIZE,
-    });
-
+    const data = await parseMermaid(diagramDefinition);
     const parsedDataViewerEl = diagramContainerEl.querySelector(
       `#parsed-${i}`
     )!;

diff --git a/playground/initCustomTest.ts b/playground/initCustomTest.ts
@@ -14,31 +14,22 @@ btn.addEventListener("click", async () => {
     const mermaidInput = document.getElementById(
       "mermaid-input"
     ) as HTMLInputElement;
-    const fontSizeInput = document.getElementById(
-      "font-size-input"
-    ) as HTMLInputElement;
 
     const diagramDefinition = mermaidInput.value;
-    const customFontSize = Number(fontSizeInput.value);
 
     // Render Mermaid diagram
     const diagramEl = document.getElementById("custom-diagram")!;
-    const { svg } = await mermaid.render(
-      `custom-digaram`,
-      `%%{init: {"themeVariables": {"fontSize": "${customFontSize}px"}} }%%\n${diagramDefinition}`
-    );
+    const { svg } = await mermaid.render("custom-digaram", diagramDefinition);
     diagramEl.innerHTML = svg;
 
     // Parse Mermaid diagram and render to Excalidraw
-    const parsedData = await parseMermaid(diagramDefinition, {
-      fontSize: customFontSize,
-    });
+    const parsedData = await parseMermaid(diagramDefinition);
 
     const parsedDataEl = document.getElementById("custom-parsed-data")!;
     parsedDataEl.parentElement!.style.display = "block";
     parsedDataEl.innerText = JSON.stringify(parsedData, null, 2);
 
-    renderExcalidraw(JSON.stringify(parsedData), customFontSize);
+    renderExcalidraw(JSON.stringify(parsedData));
   } catch (e) {
     errorEl.setAttribute("style", "display: block");
     errorEl.innerHTML = String(e);

diff --git a/playground/style.scss b/playground/style.scss
@@ -6,7 +6,16 @@ body {
     max-width: 48%;
   }
 }
-
+button {
+  height: 40px;
+  font-size: 16px;
+  background: #4dabf7;
+  border: 1px solid #a5d8ff;
+  box-shadow: none;
+  border-radius: 2px;
+  color: white;
+  cursor: pointer;
+}
 #excalidraw {
   width: 50vw;
   height: 100vh;
@@ -46,3 +55,9 @@ body {
     margin-top: 20px;
   }
 }
+
+a {
+  color: #0071ce;
+  font-weight: 600;
+  text-decoration: none;
+}