#6097 Next shapes, learn-right and card

2025-09-17 22:39:56 +02:00 · 2024-12-03 10:23:02 +01:00
parent 3c93e4640a
commit 8336d1cf2d
9 changed files with 409 additions and 37 deletions
--- a/cypress/platform/shape-tester.html
+++ b/cypress/platform/shape-tester.html
@@ -0,0 +1,102 @@
+<html>
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
+      rel="stylesheet"
+    />
+
+    <style>
+      body {
+        font-family: 'Arial';
+        background-color: #333;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="diagram"></div>
+    <script type="module">
+      import mermaid from './mermaid.esm.mjs';
+      import layouts from './mermaid-layout-elk.esm.mjs';
+      mermaid.registerLayoutLoaders(layouts);
+      mermaid.parseError = function (err, hash) {
+        console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        startOnLoad: false,
+        //look: 'handdrawn',
+        // layout: 'fixed',
+        theme: 'dark',
+        //layout: 'elk',
+        fontFamily: 'Kalam',
+        logLevel: 1,
+      });
+
+      let shape = 'card';
+      // let simplified = true;
+      let simplified = false;
+      let algorithm = 'elk';
+      // let algorithm = 'dagre';
+      let code = `---
+config:
+  layout: ${algorithm}
+---
+flowchart TD
+A["Abrakadabra"] --> C["C"] & D["I am a circle"] & n4["Untitled Node"]
+D@{ shape: diamond}
+    B["Bombrakadombra"] --> D & C & D
+    C --> E["E"] & B
+    D --> E & A
+    n4 --> C
+    A@{ shape: ${shape}}
+    B@{ shape: ${shape}}
+    C@{ shape: ${shape}}
+    D@{ shape: ${shape}}
+    E@{ shape: ${shape}}
+    n4@{ shape: ${shape}}
+
+          `;
+      if (simplified) {
+        code = `---
+config:
+  layout: ${algorithm}
+---
+flowchart LR
+A["Abrakadabra"] --> C["C"] & C & C & C & C
+%% A["Abrakadabra"] --> C
+    A@{ shape: ${shape}}
+    C@{ shape: ${shape}}
+
+          `;
+      }
+      console.log(code);
+      const { svg } = await mermaid.render('the-id-of-the-svg', code, undefined, undefined);
+      const elem = document.querySelector('#diagram');
+      elem.innerHTML = svg;
+    </script>
+  </body>
+</html>