Mermaid

README.md

@@ -23,6 +23,7 @@ The Chartifact GitHub repo has source code for these interoperating modules:
   * **Inputs** – Textboxes, checkboxes, sliders, dropdowns
   * **Tables** – Sortable, selectable, and editable data grids
   * **Charts** – Vega and Vega-Lite visualizations
+  * **Diagrams** – Mermaid diagrams (flowcharts, networks, and more) via the mermaid plugin, including tabular data-driven diagram generation
   * **Images** – Dynamic image URLs based on variables
   * **Presets** – Named sets of variable values for quick scenario switching
 

docs/assets/examples/features.markdown.folder.json

@@ -34,6 +34,10 @@
             "title": "Presets",
             "href": "markdown/features/8.presets.idoc.md"
         },
+        {
+            "title": "Mermaid",
+            "href": "markdown/features/9.mermaid.idoc.md"
+        },
         {
             "title": "Data URL",
             "href": "markdown/features/data-url.idoc.md"

docs/assets/examples/json/features/9.mermaid.idoc.json

@@ -0,0 +1,277 @@
+{
+  "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json",
+  "title": "Feature: Mermaid Plugin",
+  "variables": [
+    {
+      "variableId": "flowchartOutput",
+      "type": "string",
+      "initialValue": ""
+    },
+    {
+      "variableId": "networkOutput",
+      "type": "string",
+      "initialValue": ""
+    }
+  ],
+  "dataLoaders": [
+    {
+      "dataSourceName": "jsonData",
+      "type": "inline",
+      "format": "json",
+      "content": [
+        {
+          "lineTemplate": "node",
+          "id": "A",
+          "label": "Start"
+        },
+        {
+          "lineTemplate": "node",
+          "id": "B",
+          "label": "Middle"
+        },
+        {
+          "lineTemplate": "node",
+          "id": "C",
+          "label": "End"
+        },
+        {
+          "lineTemplate": "labeledEdge",
+          "from": "A",
+          "to": "B",
+          "label": "Next"
+        },
+        {
+          "lineTemplate": "edge",
+          "from": "B",
+          "to": "C"
+        }
+      ]
+    },
+    {
+      "dataSourceName": "networkData",
+      "type": "inline",
+      "format": "json",
+      "content": [
+        {
+          "lineTemplate": "subgraph",
+          "name": "Production"
+        },
+        {
+          "lineTemplate": "server",
+          "id": "web1",
+          "name": "Web Server",
+          "ip": "10.0.1.10"
+        },
+        {
+          "lineTemplate": "server",
+          "id": "db1",
+          "name": "Database",
+          "ip": "10.0.1.20"
+        },
+        {
+          "lineTemplate": "end"
+        },
+        {
+          "lineTemplate": "subgraph",
+          "name": "Development"
+        },
+        {
+          "lineTemplate": "server",
+          "id": "dev1",
+          "name": "Dev Server",
+          "ip": "10.0.2.10"
+        },
+        {
+          "lineTemplate": "end"
+        },
+        {
+          "lineTemplate": "secureConnection",
+          "from": "web1",
+          "to": "db1"
+        },
+        {
+          "lineTemplate": "connection",
+          "from": "dev1",
+          "to": "web1"
+        }
+      ]
+    }
+  ],
+  "groups": [
+    {
+      "groupId": "intro",
+      "elements": [
+        "# Mermaid Plugin Examples",
+        "This page demonstrates the mermaid plugin in Chartifact, including raw text, data-driven, and dynamic modes."
+      ]
+    },
+    {
+      "groupId": "raw-text",
+      "elements": [
+        "## Raw Text Mode",
+        "Simple flowchart using raw mermaid syntax:",
+        {
+          "type": "mermaid",
+          "diagramText": "flowchart TD\n    A[Start] --> B{Is it?}\n    B -->|Yes| C[OK]\n    B -->|No| D[End]\n    C --> D"
+        }
+      ]
+    },
+    {
+      "groupId": "data-driven",
+      "elements": [
+        "## Data-Driven Mode",
+        "Template-based diagram generation:",
+        {
+          "type": "table",
+          "dataSourceName": "jsonData",
+          "variableId": "jsonTable",
+          "editable": true,
+          "tabulatorOptions": {
+            "columns": [
+              {
+                "title": "LineTemplate",
+                "field": "lineTemplate",
+                "editor": "list",
+                "editorParams": {
+                  "values": [
+                    "node",
+                    "edge",
+                    "labeledEdge"
+                  ]
+                }
+              },
+              {
+                "title": "ID",
+                "field": "id",
+                "editor": "input"
+              },
+              {
+                "title": "Label",
+                "field": "label",
+                "editor": "input"
+              },
+              {
+                "title": "From",
+                "field": "from",
+                "editor": "input"
+              },
+              {
+                "title": "To",
+                "field": "to",
+                "editor": "input"
+              },
+              {
+                "title": "Text",
+                "field": "text",
+                "editor": "input"
+              }
+            ],
+            "layout": "fitColumns",
+            "maxHeight": "150px"
+          }
+        },
+        {
+          "type": "mermaid",
+          "template": {
+            "dataSourceName": "jsonTable",
+            "header": "flowchart TD",
+            "lineTemplates": {
+              "node": "{{id}}[{{label}}]",
+              "edge": "{{from}} --> {{to}}",
+              "labeledEdge": "{{from}} -->|{{label}}| {{to}}"
+            }
+          },
+          "variableId": "flowchartOutput"
+        },
+        "### Generated Mermaid Source:",
+        "```\n{{flowchartOutput}}\n```"
+      ]
+    },
+    {
+      "groupId": "network",
+      "elements": [
+        "## More Complex Example",
+        "Network diagram with servers and connections:",
+        {
+          "type": "table",
+          "dataSourceName": "networkData",
+          "variableId": "networkTable",
+          "editable": true,
+          "tabulatorOptions": {
+            "columns": [
+              {
+                "title": "LineTemplate",
+                "field": "lineTemplate",
+                "editor": "list",
+                "editorParams": {
+                  "values": [
+                    "server",
+                    "connection",
+                    "secureConnection",
+                    "subgraph",
+                    "end"
+                  ]
+                }
+              },
+              {
+                "title": "ID",
+                "field": "id",
+                "editor": "input"
+              },
+              {
+                "title": "Name",
+                "field": "name",
+                "editor": "input"
+              },
+              {
+                "title": "IP",
+                "field": "ip",
+                "editor": "input"
+              },
+              {
+                "title": "From",
+                "field": "from",
+                "editor": "input"
+              },
+              {
+                "title": "To",
+                "field": "to",
+                "editor": "input"
+              }
+            ],
+            "layout": "fitColumns",
+            "maxHeight": "200px"
+          }
+        },
+        {
+          "type": "mermaid",
+          "template": {
+            "dataSourceName": "networkTable",
+            "header": "graph LR",
+            "lineTemplates": {
+              "server": "{{id}}[{{name}}<br/>{{ip}}]",
+              "connection": "{{from}} --- {{to}}",
+              "secureConnection": "{{from}} -.->|SSL| {{to}}",
+              "subgraph": "subgraph {{name}}",
+              "end": "end"
+            }
+          },
+          "variableId": "networkOutput"
+        },
+        "### Generated Network Diagram Source:",
+        {
+          "type": "textbox",
+          "variableId": "networkOutput",
+          "multiline": true
+        },
+        "## String Input Mode",
+        "This example shows how to consume the generated Mermaid text from above and render it directly:",
+        {
+          "type": "mermaid",
+          "variableId": "networkOutput"
+        },
+        "This demonstrates the flexible input capability - the same `dataSourceName` property can handle string or array input."
+      ]
+    }
+  ]
+}