Merge pull request #1701 from mermaid-js/sidv/examples

Add examples for all diagrams
2025-08-04 07:19:03 +00:00
parent 19b82c3d44 956a584322
commit 2275404e9d
6 changed files with 53 additions and 189 deletions
@@ -91,6 +91,7 @@
    "@fontsource-variable/recursive": "^5.2.5",
    "@fsegurai/codemirror-theme-vscode-dark": "^6.1.4",
    "@fsegurai/codemirror-theme-vscode-light": "^6.1.4",
+    "@mermaid-js/examples": "^1.0.0",
    "@mermaid-js/layout-elk": "^0.1.8",
    "@mermaid-js/mermaid-zenuml": "^0.2.1",
    "codemirror": "^6.0.1",
@@ -35,6 +35,9 @@ importers:
      '@fsegurai/codemirror-theme-vscode-light':
        specifier: ^6.1.4
        version: 6.1.4(@codemirror/language@6.11.0)(@codemirror/state@6.5.2)(@codemirror/view@6.36.7)(@lezer/highlight@1.2.1)
+      '@mermaid-js/examples':
+        specifier: ^1.0.0
+        version: 1.0.0(mermaid@11.9.0)
      '@mermaid-js/layout-elk':
        specifier: ^0.1.8
        version: 0.1.8(mermaid@11.9.0)
@@ -696,6 +699,11 @@ packages:
  '@marijn/find-cluster-break@1.0.2':
    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}

+  '@mermaid-js/examples@1.0.0':
+    resolution: {integrity: sha512-OfTlpPJweRhGS/3+Wvk3WFY5kkqu/KP4PR2ZSZKxk4kuoqGsxWmsu3eDTHh6zfMIVMExILrFdacVkrtYO8QE3g==}
+    peerDependencies:
+      mermaid: ~11.9.0
+
  '@mermaid-js/layout-elk@0.1.8':
    resolution: {integrity: sha512-uU+Glm1tQZScphrFuzf6dzPpYTrET3sz6Q2SqpLj/nr+FpO6cfgJmYdJ+vWA8oGoeNQZLVey480qbKAFk8DBuQ==}
    peerDependencies:
@@ -4409,6 +4417,10 @@ snapshots:

  '@marijn/find-cluster-break@1.0.2': {}

+  '@mermaid-js/examples@1.0.0(mermaid@11.9.0)':
+    dependencies:
+      mermaid: 11.9.0
+
  '@mermaid-js/layout-elk@0.1.8(mermaid@11.9.0)':
    dependencies:
      d3: 7.9.0
@@ -1,179 +1,12 @@
 <script lang="ts">
  import Card from '$/components/Card/Card.svelte';
  import { Button } from '$/components/ui/button';
+  import { getSampleDiagrams } from '$/util/mermaid';
  import { updateCode } from '$lib/util/state';
  import { logEvent } from '$lib/util/stats';
  import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';

-  const samples = {
-    Block: `block-beta
-    columns 3
-    doc>"Document"]:3
-    space down1<[" "]>(down) space
-
-  block:e:3
-          l["left"]
-          m("A wide one in the middle")
-          r["right"]
-  end
-    space down2<[" "]>(down) space
-    db[("DB")]:3
-    space:3
-    D space C
-    db --> D
-    C --> db
-    D --> C
-    style m fill:#d6d,stroke:#333,stroke-width:4px
-    `,
-    Class: `classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }`,
-    ER: `erDiagram
-    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
-    CUSTOMER ||--o{ ORDER : places
-    CUSTOMER ||--o{ INVOICE : "liable for"
-    DELIVERY-ADDRESS ||--o{ ORDER : receives
-    INVOICE ||--|{ ORDER : covers
-    ORDER ||--|{ ORDER-ITEM : includes
-    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
-    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
-    Flow: `flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]`,
-    Gantt: `gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d`,
-    Git: `gitGraph
-    commit
-    commit
-    branch develop
-    checkout develop
-    commit
-    commit
-    checkout main
-    merge develop
-    commit
-    commit`,
-    Mindmap: `mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid`,
-    Packet: `---
-title: "TCP Packet"
---
-packet-beta
-  0-15: "Source Port"
-  16-31: "Destination Port"
-  32-63: "Sequence Number"
-  64-95: "Acknowledgment Number"
-  96-99: "Data Offset"
-  100-105: "Reserved"
-  106: "URG"
-  107: "ACK"
-  108: "PSH"
-  109: "RST"
-  110: "SYN"
-  111: "FIN"
-  112-127: "Window"
-  128-143: "Checksum"
-  144-159: "Urgent Pointer"
-  160-191: "(Options and Padding)"
-  192-255: "Data (variable length)"
-`,
-    Pie: `pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15`,
-    QuadrantChart: `quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]`,
-    Sequence: `sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!`,
-    State: `stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]`,
-    Treemap: `treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25`,
-    'User Journey': `journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 3: Me`,
-    XYChart: `
-    xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]`,
+  const extras = {
    ZenUML: `zenuml
    title Order Service
    @Actor Client #FFEBE6
@@ -200,8 +33,8 @@ packet-beta
    `
  };

-  type SampleTypes = keyof typeof samples;
-  const loadSampleDiagram = (diagramType: SampleTypes): void => {
+  const samples = { ...getSampleDiagrams(), ...extras } as const;
+  const loadSampleDiagram = (diagramType: string): void => {
    updateCode(samples[diagramType], {
      resetPanZoom: true,
      updateDiagram: true
@@ -209,23 +42,20 @@ packet-beta
    logEvent('loadSampleDiagram', { diagramType });
  };

-  const diagramOrder: SampleTypes[] = [
-    'Flow',
-    'Sequence',
+  const mainDiagrams = [
+    'Flowchart',
    'Class',
+    'Sequence',
+    'Entity Relationship',
    'State',
-    'ER',
-    'Gantt',
-    'User Journey',
-    'Git',
-    'Pie',
-    'Mindmap',
-    'ZenUML',
-    'QuadrantChart',
-    'XYChart',
-    'Block',
-    'Packet',
-    'Treemap'
+    'Mindmap'
+  ];
+
+  const diagramOrder = [
+    ...mainDiagrams,
+    ...Object.keys(samples)
+      .filter((key) => !mainDiagrams.includes(key))
+      .sort()
  ];
 </script>

@@ -1,3 +1,4 @@
+import { diagramData } from '@mermaid-js/examples';
 import elkLayouts from '@mermaid-js/layout-elk';
 import zenuml from '@mermaid-js/mermaid-zenuml';
 import type { MermaidConfig, RenderResult } from 'mermaid';
@@ -39,3 +40,23 @@ export const standardizeDiagramType = (diagramType: string) => {
    }
  }
 };
+
+type DiagramDefinition = (typeof diagramData)[number];
+
+const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
+  return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
+};
+
+export const getSampleDiagrams = () => {
+  const diagrams = diagramData
+    .filter((d) => isValidDiagram(d))
+    .map(({ examples, ...rest }) => ({
+      ...rest,
+      example: examples?.filter(({ isDefault }) => isDefault)[0]
+    }));
+  const examples: Record<string, string> = {};
+  for (const diagram of diagrams) {
+    examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
+  }
+  return examples;
+};
@@ -26,10 +26,10 @@ test.describe('Check actions', () => {

    // Verify downloaded file is different for different diagrams
    await editPage.toggleSampleDiagrams();
-    await editPage.loadSampleDiagram('ER');
+    await editPage.loadSampleDiagram('Entity Relationship');

    const secondPngSize = await editPage.checkAndDownloadPNG(81_000);
-    const secondSvgSize = await editPage.downloadSVG(11_000);
+    const secondSvgSize = await editPage.downloadSVG(40_000);

    // Verify files are actually different
    expect(firstPngSize).not.toBe(secondPngSize);
@@ -12,7 +12,7 @@ test.describe('Editor docs tests', () => {
  test('Test to see if the correct URL loads when changing from one diagram to other', async ({
    editPage
  }) => {
-    await editPage.loadSampleDiagram('Flow');
+    await editPage.loadSampleDiagram('Flowchart');
    await editPage.checkDocURL(/syntax\/flowchart\.html/);
    await editPage.setEditorMode('Config');
    await editPage.checkDocURL(/syntax\/flowchart\.html#configuration/);