mermaid-js · NicolasNewman · Mar 11, 2024 · Mar 11, 2024 · Mar 11, 2024 · Mar 11, 2024
diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
@@ -25,6 +25,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'sankey',
   'block',
   'packet',
+  'architecture',
 ] as const;
 
 /**

diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
@@ -53,6 +53,7 @@ GENERICTYPE
 getBoundarys
 grammr
 graphtype
+halign
 iife
 interp
 introdcued
@@ -64,6 +65,7 @@ Kaufmann
 keyify
 LABELPOS
 LABELTYPE
+layoutstop
 lcov
 LEFTOF
 Lexa

diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt
@@ -23,6 +23,7 @@ Docsy
 DokuWiki
 dompurify
 elkjs
+fcose
 fontawesome
 Foswiki
 Gitea

diff --git a/demos/architecture.html b/demos/architecture.html
@@ -0,0 +1,310 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>Architecture Mermaid Quick Test Page</title>
+  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
+  <style>
+    div.mermaid {
+      /* font-family: 'trebuchet ms', verdana, arial; */
+      font-family: 'Courier New', Courier, monospace !important;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Architecture diagram demo</h1>
+  <h2>Simple diagram with groups</h2>
+  <pre class="mermaid">
+      architecture
+        group api(cloud)[API]
+
+        service db(database)[Database] in api
+        service disk1(disk)[Storage] in api
+        service disk2(disk)[Storage] in api
+        service server(server)[Server] in api
+        service gateway(internet)[Gateway] 
+
+        db L--R server
+        disk1 T--B server
+        disk2 T--B db
+        server T--B gateway
+    </pre>
+  <hr />
+
+  <h2>Groups within groups</h2>
+  <pre class="mermaid">
+      architecture
+        group api[API]
+        group public[Public API] in api
+        group private[Private API] in api
+
+
+        service serv1(server)[Server] in public
+
+
+        service serv2(server)[Server] in private
+        service db(database)[Database] in private
+
+        service gateway(internet)[Gateway] in api
+
+        serv1 B--T serv2
+
+        serv2 L--R db
+
+        serv1 L--R gateway
+    </pre>
+  <hr />
+
+  <h2>Default icon (?) from uknown icon name</h2>
+  <pre class="mermaid">
+      architecture
+        service unknown(iconnamedoesntexist)[Uknown Icon]
+    </pre>
+  <hr />
+
+  <h2>Split Direction</h2>
+  <pre class="mermaid">
+      architecture
+        service db(database)[Database]
+        service s3(disk)[Storage]
+        service serv1(server)[Server 1]
+        service serv2(server)[Server 2]
+        service disk(disk)[Disk]
+
+        db L--R s3
+        serv1 L--T s3
+        serv2 L--B s3
+        serv1 T--B disk
+    </pre>
+  <hr />
+
+  <h2>Arrow Tests</h2>
+  <pre class="mermaid">
+      architecture
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC (L--R) servL
+        servC (R--L) servR
+        servC (T--B) servT
+        servC (B--T) servB
+
+        servL (T--L) servT
+        servL (B--L) servB
+        servR (T--R) servT
+        servR (B--R) servB
+    </pre>
+  <pre class="mermaid">
+      architecture
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC (L--R) servL
+        servC (R--L) servR
+        servC (T--B) servT
+        servC (B--T) servB
+
+        servT (L--T) servL
+        servB (L--B) servL
+        servT (R--T) servR
+        servB (R--B) servR
+    </pre>
+  <hr />
+
+  <h2>Group Edges</h2>
+  <pre class="mermaid">
+      architecture
+        group left_group(cloud)[Left]
+        group right_group(cloud)[Right]
+        group top_group(cloud)[Top]
+        group bottom_group(cloud)[Bottom]
+        group center_group(cloud)[Center]
+
+        service left_disk(disk)[Disk] in left_group
+        service right_disk(disk)[Disk] in right_group
+        service top_disk(disk)[Disk] in top_group
+        service bottom_disk(disk)[Disk] in bottom_group
+        service center_disk(disk)[Disk] in center_group
+
+        left_disk{group} (R--L) center_disk{group}
+        right_disk{group} (L--R) center_disk{group}
+        top_disk{group} (B--T) center_disk{group}
+        bottom_disk{group} (T--B) center_disk{group}
+  </pre>
+  <hr />
+
+  <h2>Edge Label Test</h2>
+  <pre class="mermaid">
+      architecture
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC L-[Label]-R servL
+        servC R-[Label]-L servR
+        servC T-[Label]-B servT
+        servC B-[Label]-T servB
+
+        servL T-[Label]-L servT
+        servL B-[Label]-L servB
+        servR T-[Label]-R servT
+        servR B-[Label]-R servB
+    </pre>
+  <pre class="mermaid">
+      architecture
+        service servC(server)[Server 1]
+        service servL(server)[Server 2]
+        service servR(server)[Server 3]
+        service servT(server)[Server 4]
+        service servB(server)[Server 5]
+
+        servC L-[Label that is Long]-R servL
+        servC R-[Label that is Long]-L servR
+        servC T-[Label that is Long]-B servT
+        servC B-[Label that is Long]-T servB
+
+        servL T-[Label that is Long]-L servT
+        servL B-[Label that is Long]-L servB
+        servR T-[Label that is Long]-R servT
+        servR B-[Label that is Long]-R servB
+    </pre>
+
+  <hr />
+  <h2>Junction Demo</h2>
+  <pre class="mermaid">
+      architecture
+        service left_disk(disk)[Disk]
+        service top_disk(disk)[Disk]
+        service bottom_disk(disk)[Disk]
+        service top_gateway(internet)[Gateway]
+        service bottom_gateway(internet)[Gateway]
+        junction juncC
+        junction juncR
+
+        left_disk R--L juncC
+        top_disk B--T juncC
+        bottom_disk T--B juncC
+        juncC R--L juncR
+        top_gateway B--T juncR
+        bottom_gateway T--B juncR
+    </pre>
+  <hr />
+
+  <h2>Junction Demo Groups</h2>
+  <pre class="mermaid">
+      architecture
+        group left
+        group right
+        service left_disk(disk)[Disk] in left
+        service top_disk(disk)[Disk] in left
+        service bottom_disk(disk)[Disk] in left
+        service top_gateway(internet)[Gateway] in right
+        service bottom_gateway(internet)[Gateway] in right
+        junction juncC in left
+        junction juncR in right
+
+        left_disk R--L juncC
+        top_disk B--T juncC
+        bottom_disk T--B juncC
+
+
+        top_gateway (B--T juncR
+        bottom_gateway (T--B juncR
+
+        juncC{group} R--L) juncR{group}
+    </pre>
+  <hr />
+
+  <h2>AWS Icon Demo</h2>
+  <pre class="mermaid">
+    architecture
+      service s3(s3)[Cloud Store]
+      service ec2(ec2)[Server]
+      service wave(wavelength)[Wave]
+
+      s3 L--R ec2
+      s3 T--B wave
+  </pre>
+
+  <script type="module">
+    import mermaid from './mermaid.esm.mjs';
+
+    const ALLOWED_TAGS = [
+      'a',
+      'b',
+      'blockquote',
+      'br',
+      'dd',
+      'div',
+      'dl',
+      'dt',
+      'em',
+      'foreignObject',
+      'h1',
+      'h2',
+      'h3',
+      'h4',
+      'h5',
+      'h6',
+      'h7',
+      'h8',
+      'hr',
+      'i',
+      'li',
+      'ul',
+      'ol',
+      'p',
+      'pre',
+      'span',
+      'strike',
+      'strong',
+      'table',
+      'tbody',
+      'td',
+      'tfoot',
+      'th',
+      'thead',
+      'tr',
+    ];
+    mermaid.parseError = function (err, hash) {
+      // console.error('Mermaid error: ', err);
+    };
+    mermaid.initialize({
+      theme: 'base',
+      startOnLoad: true,
+      logLevel: 0,
+      flowchart: {
+        useMaxWidth: false,
+        htmlLabels: true,
+      },
+      gantt: {
+        useMaxWidth: false,
+      },
+      architecture: {
+        iconSize: 80,
+      },
+      useMaxWidth: false,
+      iconLibraries: ['aws:full']
+    });
+    function callback() {
+      alert('It worked');
+    }
+    mermaid.parseError = function (err, hash) {
+      console.error('In parse error:');
+      console.error(err);
+    };
+  </script>
+</body>
+
+</html>
diff --git a/demos/index.html b/demos/index.html
@@ -88,6 +88,9 @@ <h2><a href="./packet.html">Packet</a></h2>
       <li>
         <h2><a href="./block.html">Layered Blocks</a></h2>
       </li>
+      <li>
+        <h2><a href="./architecture.html">Architecture</a></h2>
+      </li>
     </ul>
   </body>
 </html>
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
@@ -72,6 +72,7 @@
     "@mermaid-js/parser": "workspace:^",
     "cytoscape": "^3.28.1",
     "cytoscape-cose-bilkent": "^4.1.0",
+    "cytoscape-fcose": "^2.2.0",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "dagre-d3-es": "7.0.10",
@@ -89,6 +90,7 @@
   "devDependencies": {
     "@adobe/jsonschema2md": "^8.0.0",
     "@types/cytoscape": "^3.19.16",
+    "@types/cytoscape-fcose": "^2.2.4",
     "@types/d3": "^7.4.3",
     "@types/d3-sankey": "^0.12.4",
     "@types/d3-scale": "^4.0.8",

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -54,6 +54,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'gitGraph',
   'c4',
   'sankey',
+  'architecture',
 ];
 
 /**