feat: Add title and examples for diagrams

cypress/platform/sidv.html

@@ -40,6 +40,7 @@ graph TB
       const el = document.getElementById('d2');
       const { svg } = await mermaid.render('d22', value);
       console.log(svg);
+      console.log(mermaid.getDiagramData());
       el.innerHTML = svg;
       // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
       // mermaid.test1('second_fast', 200).then((r) => console.info(r));

packages/mermaid/src/diagrams/architecture/architectureDetector.ts

@@ -19,6 +19,24 @@ const architecture: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Architecture Diagram',
+  description: 'Visualize system architecture and components',
+  examples: [
+    {
+      code: `architecture-beta
+    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
+
+    db:L -- R:server
+    disk1:T -- B:server
+    disk2:T -- B:db`,
+      title: 'Basic System Architecture',
+    },
+  ],
 };
 
 export default architecture;

packages/mermaid/src/diagrams/block/blockDetector.ts

@@ -15,6 +15,27 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Block Diagram',
+  description: 'Create block-based visualizations with beta styling',
+  examples: [
+    {
+      code: `block-beta
+columns 1
+  db(("DB"))
+  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
+  block:ID
+    A
+    B["A wide one in the middle"]
+    C
+  end
+  space
+  D
+  ID --> D
+  C --> D
+  style B fill:#969,stroke:#333,stroke-width:4px`,
+      title: 'Basic Block Layout',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/c4/c4Detector.ts

@@ -19,6 +19,47 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'C4 Diagram',
+  description:
+    'Visualize software architecture using the C4 model (Context, Container, Component, Code)',
+  examples: [
+    {
+      code: `C4Context
+    title System Context diagram for Internet Banking System
+    Enterprise_Boundary(b0, "BankBoundary0") {
+        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
+        Person(customerB, "Banking Customer B")
+        Person_Ext(customerC, "Banking Customer C", "desc")
+
+        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
+
+        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
+
+        Enterprise_Boundary(b1, "BankBoundary") {
+            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
+
+            System_Boundary(b2, "BankBoundary2") {
+                System(SystemA, "Banking System A")
+                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
+            }
+
+            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
+            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
+
+            Boundary(b3, "BankBoundary3", "boundary") {
+                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
+                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
+            }
+        }
+    }
+
+    BiRel(customerA, SystemAA, "Uses")
+    BiRel(SystemAA, SystemE, "Uses")
+    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
+    Rel(SystemC, customerA, "Sends e-mails to")`,
+      title: 'Internet Banking System Context',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/class/classDetector-V2.ts

@@ -24,6 +24,34 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Class Diagram',
+  description: 'Visualize class structures and relationships in object-oriented programming',
+  examples: [
+    {
+      code: `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()
+    }`,
+      title: 'Basic Class Inheritance',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/er/erDetector.ts

@@ -19,6 +19,36 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Entity Relationship Diagram',
+  description: 'Visualize database schemas and relationships between entities',
+  examples: [
+    {
+      code: `erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ ORDER_ITEM : contains
+    PRODUCT ||--o{ ORDER_ITEM : includes
+    CUSTOMER {
+        string id
+        string name
+        string email
+    }
+    ORDER {
+        string id
+        date orderDate
+        string status
+    }
+    PRODUCT {
+        string id
+        string name
+        float price
+    }
+    ORDER_ITEM {
+        int quantity
+        float price
+    }`,
+      title: 'Basic ER Schema',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/flowchart/flowDetector-v2.ts

@@ -31,6 +31,19 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Flowchart',
+  description: 'Visualize flowcharts and directed graphs',
+  examples: [
+    {
+      code: `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]`,
+      title: 'Basic Flowchart',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/gantt/ganttDetector.ts

@@ -19,6 +19,22 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Gantt Chart',
+  description: 'Visualize project schedules and timelines',
+  examples: [
+    {
+      code: `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`,
+      title: 'Basic Project Timeline',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/git/gitGraphDetector.ts

@@ -16,6 +16,28 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Git Graph',
+  description: 'Visualize Git repository history and branch relationships',
+  examples: [
+    {
+      code: `gitGraph
+    commit
+    branch develop
+    checkout develop
+    commit
+    commit
+    checkout main
+    merge develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    commit
+    checkout main
+    merge feature`,
+      title: 'Basic Git Flow',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/kanban/detector.ts

@@ -18,6 +18,36 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Kanban Diagram',
+  description: 'Visualize work items in a Kanban board',
+  examples: [
+    {
+      code: `---
+config:
+  kanban:
+    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
+---
+kanban
+  Todo
+    [Create Documentation]
+    docs[Create Blog about the new diagram]
+  [In progress]
+    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
+  id9[Ready for deploy]
+    id8[Design grammar]@{ assigned: 'knsv' }
+  id10[Ready for test]
+    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
+    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
+  id11[Done]
+    id5[define getData]
+    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
+    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }
+
+  id12[Can't reproduce]
+    id3[Weird flickering in Firefox]
+`,
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/mindmap/detector.ts

@@ -18,6 +18,31 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Mindmap',
+  description: 'Visualize ideas and concepts in a tree-like structure',
+  examples: [
+    {
+      code: `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`,
+    },
+  ],
 };
 
 export default plugin;
+
+// cspell:ignore Buzan

packages/mermaid/src/diagrams/packet/detector.ts

@@ -19,4 +19,32 @@ export const packet: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Packet Diagram',
+  description: 'Visualize packet data and network traffic',
+  examples: [
+    {
+      code: `---
+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)"
+`,
+    },
+  ],
 };

packages/mermaid/src/diagrams/pie/pieDetector.ts

@@ -19,4 +19,15 @@ export const pie: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Pie Chart',
+  description: 'Visualize data as proportional segments of a circle',
+  examples: [
+    {
+      code: `pie title Pets adopted by volunteers
+    "Dogs" : 386
+    "Cats" : 85
+    "Rats" : 15`,
+      title: 'Basic Pie Chart',
+    },
+  ],
 };

packages/mermaid/src/diagrams/quadrant-chart/quadrantDetector.ts

@@ -19,6 +19,27 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Quadrant Chart',
+  description: 'Visualize items in a 2x2 matrix based on two variables',
+  examples: [
+    {
+      code: `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]`,
+      title: 'Product Positioning',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/radar/detector.ts

@@ -19,4 +19,22 @@ export const radar: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Radar Diagram',
+  description: 'Visualize data in a radial format',
+  examples: [
+    {
+      code: `---
+title: "Grades"
+---
+radar-beta
+  axis m["Math"], s["Science"], e["English"]
+  axis h["History"], g["Geography"], a["Art"]
+  curve a["Alice"]{85, 90, 80, 70, 75, 90}
+  curve b["Bob"]{70, 75, 85, 80, 90, 85}
+
+  max 100
+  min 0
+`,
+    },
+  ],
 };

packages/mermaid/src/diagrams/requirement/requirementDetector.ts

@@ -19,6 +19,27 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Requirement Diagram',
+  description: 'Visualize system requirements and their relationships',
+  examples: [
+    {
+      code: `requirementDiagram
+
+    requirement test_req {
+    id: 1
+    text: the test text.
+    risk: high
+    verifymethod: test
+    }
+
+    element test_entity {
+    type: simulation
+    }
+
+    test_entity - satisfies -> test_req`,
+      title: 'Basic Requirements',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/sankey/sankeyDetector.ts

@@ -15,6 +15,88 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Sankey Diagram',
+  description: 'Visualize flow quantities between different stages or processes',
+  examples: [
+    {
+      code: `---
+config:
+  sankey:
+    showValues: false
+---
+sankey-beta
+
+Agricultural 'waste',Bio-conversion,124.729
+Bio-conversion,Liquid,0.597
+Bio-conversion,Losses,26.862
+Bio-conversion,Solid,280.322
+Bio-conversion,Gas,81.144
+Biofuel imports,Liquid,35
+Biomass imports,Solid,35
+Coal imports,Coal,11.606
+Coal reserves,Coal,63.965
+Coal,Solid,75.571
+District heating,Industry,10.639
+District heating,Heating and cooling - commercial,22.505
+District heating,Heating and cooling - homes,46.184
+Electricity grid,Over generation / exports,104.453
+Electricity grid,Heating and cooling - homes,113.726
+Electricity grid,H2 conversion,27.14
+Electricity grid,Industry,342.165
+Electricity grid,Road transport,37.797
+Electricity grid,Agriculture,4.412
+Electricity grid,Heating and cooling - commercial,40.858
+Electricity grid,Losses,56.691
+Electricity grid,Rail transport,7.863
+Electricity grid,Lighting & appliances - commercial,90.008
+Electricity grid,Lighting & appliances - homes,93.494
+Gas imports,NGas,40.719
+Gas reserves,NGas,82.233
+Gas,Heating and cooling - commercial,0.129
+Gas,Losses,1.401
+Gas,Thermal generation,151.891
+Gas,Agriculture,2.096
+Gas,Industry,48.58
+Geothermal,Electricity grid,7.013
+H2 conversion,H2,20.897
+H2 conversion,Losses,6.242
+H2,Road transport,20.897
+Hydro,Electricity grid,6.995
+Liquid,Industry,121.066
+Liquid,International shipping,128.69
+Liquid,Road transport,135.835
+Liquid,Domestic aviation,14.458
+Liquid,International aviation,206.267
+Liquid,Agriculture,3.64
+Liquid,National navigation,33.218
+Liquid,Rail transport,4.413
+Marine algae,Bio-conversion,4.375
+NGas,Gas,122.952
+Nuclear,Thermal generation,839.978
+Oil imports,Oil,504.287
+Oil reserves,Oil,107.703
+Oil,Liquid,611.99
+Other waste,Solid,56.587
+Other waste,Bio-conversion,77.81
+Pumped heat,Heating and cooling - homes,193.026
+Pumped heat,Heating and cooling - commercial,70.672
+Solar PV,Electricity grid,59.901
+Solar Thermal,Heating and cooling - homes,19.263
+Solar,Solar Thermal,19.263
+Solar,Solar PV,59.901
+Solid,Agriculture,0.882
+Solid,Thermal generation,400.12
+Solid,Industry,46.477
+Thermal generation,Electricity grid,525.531
+Thermal generation,Losses,787.129
+Thermal generation,District heating,79.329
+Tidal,Electricity grid,9.452
+UK land based bioenergy,Bio-conversion,182.01
+Wave,Electricity grid,19.013
+Wind,Electricity grid,289.366`,
+      title: 'Energy Flow',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/sequence/sequenceDetector.ts

@@ -19,6 +19,18 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Sequence Diagram',
+  description: 'Visualize interactions between objects over time',
+  examples: [
+    {
+      code: `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!`,
+      title: 'Basic Sequence',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/state/stateDetector-V2.ts

@@ -25,6 +25,20 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'State Diagram',
+  description: 'Visualize state transitions and behaviors of a system',
+  examples: [
+    {
+      code: `stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+    Still --> Moving
+    Moving --> Still
+    Moving --> Crash
+    Crash --> [*]`,
+      title: 'Basic State',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/timeline/detector.ts

@@ -19,6 +19,20 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'Timeline Diagram',
+  description: 'Visualize events and milestones in chronological order',
+  examples: [
+    {
+      code: `timeline
+    title History of Social Media Platform
+    2002 : LinkedIn
+    2004 : Facebook
+         : Google
+    2005 : YouTube
+    2006 : Twitter`,
+      title: 'Project Timeline',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/user-journey/journeyDetector.ts

@@ -19,6 +19,22 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'User Journey Diagram',
+  description: 'Visualize user interactions and experiences with a system',
+  examples: [
+    {
+      code: `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: 5: Me`,
+      title: 'My Working Day',
+    },
+  ],
 };
 
 export default plugin;

packages/mermaid/src/diagrams/xychart/xychartDetector.ts

@@ -19,6 +19,19 @@ const plugin: ExternalDiagramDefinition = {
   id,
   detector,
   loader,
+  title: 'XY Chart',
+  description: 'Create scatter plots and line charts with customizable axes',
+  examples: [
+    {
+      code: `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]`,
+      title: 'Sales Revenue',
+    },
+  ],
 };
 
 export default plugin;