diff --git a/README.md b/README.md
index f65e631a..3bc93913 100644
--- a/README.md
+++ b/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
 
diff --git a/docs/assets/examples/features.markdown.folder.json b/docs/assets/examples/features.markdown.folder.json
index 90ad2c31..f2b7a206 100644
--- a/docs/assets/examples/features.markdown.folder.json
+++ b/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"
diff --git a/docs/assets/examples/json/features/9.mermaid.idoc.json b/docs/assets/examples/json/features/9.mermaid.idoc.json
new file mode 100644
index 00000000..76f591ae
--- /dev/null
+++ b/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."
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/assets/examples/json/mermaid-org chart.idoc.json b/docs/assets/examples/json/mermaid-org chart.idoc.json
new file mode 100644
index 00000000..0a9335f9
--- /dev/null
+++ b/docs/assets/examples/json/mermaid-org chart.idoc.json	
@@ -0,0 +1,198 @@
+{
+  "$schema": "https://microsoft.github.io/chartifact/schema/idoc_v1.json",
+  "title": "Org Chart Example (Mermaid)",
+  "dataLoaders": [
+    {
+      "dataSourceName": "orgChartData",
+      "type": "inline",
+      "format": "json",
+      "content": [
+        {
+          "lineTemplate": "person",
+          "id": "CEO",
+          "label": "CEO<br/>Alice Smith"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "CTO",
+          "label": "CTO<br/>Bob Lee"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "CFO",
+          "label": "CFO<br/>Carol Jones"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "COO",
+          "label": "COO<br/>David Kim"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG1",
+          "label": "Lead Engineer<br/>Eve Tran"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG2",
+          "label": "Engineer<br/>Frank Wu"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG3",
+          "label": "Engineer<br/>Grace Lin"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ACC1",
+          "label": "Accountant<br/>Henry Patel"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ACC2",
+          "label": "Accountant<br/>Ivy Chen"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "OPS1",
+          "label": "Operations Mgr<br/>Jack Brown"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "OPS2",
+          "label": "Ops Specialist<br/>Kim Lee"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "CTO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "CFO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "COO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG2"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG3"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CFO",
+          "to": "ACC1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CFO",
+          "to": "ACC2"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "COO",
+          "to": "OPS1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "COO",
+          "to": "OPS2"
+        }
+      ]
+    }
+  ],
+  "variables": [
+    {
+      "variableId": "direction",
+      "type": "string",
+      "initialValue": "TD"
+    },
+    {
+      "variableId": "orgChartOutput",
+      "type": "string",
+      "initialValue": ""
+    }
+  ],
+  "groups": [
+    {
+      "groupId": "main",
+      "elements": [
+        "# Mermaid Plugin Example - Org Chart",
+        "Template-based org chart generation:",
+        {
+          "type": "mermaid",
+          "template": {
+            "dataSourceName": "orgChartDataTable",
+            "header": "graph {{direction}}",
+            "lineTemplates": {
+              "person": "{{id}}[{{label}}]",
+              "orgEdge": "{{from}} --> {{to}}"
+            }
+          },
+          "variableId": "orgChartOutput"
+        },
+        {
+          "type": "dropdown",
+          "variableId": "direction",
+          "options": [
+            "TD",
+            "LR"
+          ]
+        },
+        "## JSON Data",
+        "Load data from a static JSON array.",
+        {
+          "type": "table",
+          "dataSourceName": "orgChartData",
+          "variableId": "orgChartDataTable",
+          "editable": true,
+          "tabulatorOptions": {
+            "columns": [
+              {
+                "title": "LineTemplate",
+                "field": "lineTemplate",
+                "editor": "input"
+              },
+              {
+                "title": "ID",
+                "field": "id",
+                "editor": "input"
+              },
+              {
+                "title": "Label",
+                "field": "label",
+                "editor": "input"
+              },
+              {
+                "title": "From",
+                "field": "from",
+                "editor": "input"
+              },
+              {
+                "title": "To",
+                "field": "to",
+                "editor": "input"
+              }
+            ],
+            "layout": "fitColumns",
+            "maxHeight": "300px"
+          }
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/assets/examples/markdown/features/9.mermaid.idoc.md b/docs/assets/examples/markdown/features/9.mermaid.idoc.md
new file mode 100644
index 00000000..91bd72ae
--- /dev/null
+++ b/docs/assets/examples/markdown/features/9.mermaid.idoc.md
@@ -0,0 +1,302 @@
+```json vega
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "This is the central brain of the page",
+  "signals": [
+    {
+      "name": "jsonTable",
+      "update": "data('jsonTable')"
+    },
+    {
+      "name": "networkTable",
+      "update": "data('networkTable')"
+    },
+    {
+      "name": "flowchartOutput",
+      "value": ""
+    },
+    {
+      "name": "networkOutput",
+      "value": ""
+    },
+    {
+      "name": "jsonData",
+      "update": "data('jsonData')"
+    },
+    {
+      "name": "networkData",
+      "update": "data('networkData')"
+    }
+  ],
+  "data": [
+    {
+      "name": "networkData",
+      "values": [
+        {
+          "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"
+        }
+      ]
+    },
+    {
+      "name": "jsonData",
+      "values": [
+        {
+          "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"
+        }
+      ]
+    },
+    {
+      "name": "networkTable",
+      "values": []
+    },
+    {
+      "name": "jsonTable",
+      "values": []
+    }
+  ]
+}
+```
+
+# Mermaid Plugin Examples
+
+This page demonstrates the mermaid plugin in Chartifact, including raw text, data-driven, and dynamic modes.
+
+## Raw Text Mode
+
+Simple flowchart using raw mermaid syntax:
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    B -->|No| D[End]
+    C --> D
+```
+
+## Data-Driven Mode
+
+Template-based diagram generation:
+
+```json tabulator
+{
+  "dataSourceName": "jsonData",
+  "variableId": "jsonTable",
+  "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"
+  },
+  "editable": true
+}
+```
+
+```json mermaid
+{
+  "template": {
+    "dataSourceName": "jsonTable",
+    "header": "flowchart TD",
+    "lineTemplates": {
+      "node": "{{id}}[{{label}}]",
+      "edge": "{{from}} --> {{to}}",
+      "labeledEdge": "{{from}} -->|{{label}}| {{to}}"
+    }
+  },
+  "variableId": "flowchartOutput"
+}
+```
+
+### Generated Mermaid Source:
+
+```
+{{flowchartOutput}}
+```
+
+## More Complex Example
+
+Network diagram with servers and connections:
+
+```json tabulator
+{
+  "dataSourceName": "networkData",
+  "variableId": "networkTable",
+  "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"
+  },
+  "editable": true
+}
+```
+
+```json 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:
+
+```json textbox
+{"variableId":"networkOutput","value":"","multiline":true}
+```
+
+## String Input Mode
+
+This example shows how to consume the generated Mermaid text from above and render it directly:
+
+```json mermaid
+{"variableId":"networkOutput"}
+```
+
+This demonstrates the flexible input capability - the same `dataSourceName` property can handle string or array input.
\ No newline at end of file
diff --git a/docs/assets/examples/markdown/mermaid-org chart.idoc.md b/docs/assets/examples/markdown/mermaid-org chart.idoc.md
new file mode 100644
index 00000000..4ff73510
--- /dev/null
+++ b/docs/assets/examples/markdown/mermaid-org chart.idoc.md	
@@ -0,0 +1,212 @@
+```json vega
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "This is the central brain of the page",
+  "signals": [
+    {
+      "name": "orgChartDataTable",
+      "update": "data('orgChartDataTable')"
+    },
+    {
+      "name": "direction",
+      "value": "TD"
+    },
+    {
+      "name": "orgChartOutput",
+      "value": ""
+    },
+    {
+      "name": "orgChartData",
+      "update": "data('orgChartData')"
+    }
+  ],
+  "data": [
+    {
+      "name": "orgChartData",
+      "values": [
+        {
+          "lineTemplate": "person",
+          "id": "CEO",
+          "label": "CEO<br/>Alice Smith"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "CTO",
+          "label": "CTO<br/>Bob Lee"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "CFO",
+          "label": "CFO<br/>Carol Jones"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "COO",
+          "label": "COO<br/>David Kim"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG1",
+          "label": "Lead Engineer<br/>Eve Tran"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG2",
+          "label": "Engineer<br/>Frank Wu"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ENG3",
+          "label": "Engineer<br/>Grace Lin"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ACC1",
+          "label": "Accountant<br/>Henry Patel"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "ACC2",
+          "label": "Accountant<br/>Ivy Chen"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "OPS1",
+          "label": "Operations Mgr<br/>Jack Brown"
+        },
+        {
+          "lineTemplate": "person",
+          "id": "OPS2",
+          "label": "Ops Specialist<br/>Kim Lee"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "CTO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "CFO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CEO",
+          "to": "COO"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG2"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CTO",
+          "to": "ENG3"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CFO",
+          "to": "ACC1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "CFO",
+          "to": "ACC2"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "COO",
+          "to": "OPS1"
+        },
+        {
+          "lineTemplate": "orgEdge",
+          "from": "COO",
+          "to": "OPS2"
+        }
+      ]
+    },
+    {
+      "name": "orgChartDataTable",
+      "values": []
+    }
+  ]
+}
+```
+
+# Mermaid Plugin Example - Org Chart
+
+Template-based org chart generation:
+
+```json mermaid
+{
+  "template": {
+    "dataSourceName": "orgChartDataTable",
+    "header": "graph {{direction}}",
+    "lineTemplates": {
+      "person": "{{id}}[{{label}}]",
+      "orgEdge": "{{from}} --> {{to}}"
+    }
+  },
+  "variableId": "orgChartOutput"
+}
+```
+
+```json dropdown
+{
+  "variableId": "direction",
+  "value": "TD",
+  "options": [
+    "TD",
+    "LR"
+  ]
+}
+```
+
+## JSON Data
+
+Load data from a static JSON array.
+
+```json tabulator
+{
+  "dataSourceName": "orgChartData",
+  "variableId": "orgChartDataTable",
+  "tabulatorOptions": {
+    "columns": [
+      {
+        "title": "LineTemplate",
+        "field": "lineTemplate",
+        "editor": "input"
+      },
+      {
+        "title": "ID",
+        "field": "id",
+        "editor": "input"
+      },
+      {
+        "title": "Label",
+        "field": "label",
+        "editor": "input"
+      },
+      {
+        "title": "From",
+        "field": "from",
+        "editor": "input"
+      },
+      {
+        "title": "To",
+        "field": "to",
+        "editor": "input"
+      }
+    ],
+    "layout": "fitColumns",
+    "maxHeight": "300px"
+  },
+  "editable": true
+}
+```
\ No newline at end of file
diff --git a/docs/dist/v1/chartifact-reset.css b/docs/dist/v1/chartifact-reset.css
index bdc6be51..7ab6f4d7 100644
--- a/docs/dist/v1/chartifact-reset.css
+++ b/docs/dist/v1/chartifact-reset.css
@@ -61,3 +61,7 @@ ul img {
 .chartifact-plugin-vega form>:first-child {
     margin-top: 4px;
 }
+
+.chartifact-plugin-mermaid {
+    text-align: center;
+}
diff --git a/docs/dist/v1/chartifact.compiler.umd.js b/docs/dist/v1/chartifact.compiler.umd.js
index 328ba037..4daf2da7 100644
--- a/docs/dist/v1/chartifact.compiler.umd.js
+++ b/docs/dist/v1/chartifact.compiler.umd.js
@@ -330,7 +330,11 @@ ${content}
 ${content}
 :::`;
   }
-  function targetMarkdown(page) {
+  const defaultOptions = {
+    extraNewlineCount: 1
+  };
+  function targetMarkdown(page, options) {
+    const finalOptions = { ...defaultOptions, ...options };
     const mdSections = [];
     const dataLoaders = page.dataLoaders || [];
     const variables = page.variables || [];
@@ -393,7 +397,8 @@ ${content}
         mdSections.unshift(tickWrap("#", JSON.stringify(page.notes, null, defaultJsonIndent)));
       }
     }
-    const markdown = mdSections.join("\n\n");
+    const newLines = "\n".repeat(1 + finalOptions.extraNewlineCount);
+    const markdown = mdSections.join(newLines);
     return markdown;
   }
   function dataLoaderMarkdown(dataSources, variables, tableElements) {
@@ -483,6 +488,26 @@ ${content}
             addSpec("image", imageSpec);
             break;
           }
+          case "mermaid": {
+            const { diagramText, template, variableId } = element;
+            if (diagramText) {
+              mdElements.push(tickWrap("mermaid", diagramText));
+            } else if (template) {
+              const mermaidSpec = {
+                template
+              };
+              if (variableId) {
+                mermaidSpec.variableId = variableId;
+              }
+              addSpec("mermaid", mermaidSpec);
+            } else if (variableId) {
+              const mermaidSpec = {
+                variableId
+              };
+              addSpec("mermaid", mermaidSpec, false);
+            }
+            break;
+          }
           case "presets": {
             const { presets } = element;
             const presetsSpec = presets;
diff --git a/docs/dist/v1/chartifact.editor.umd.js b/docs/dist/v1/chartifact.editor.umd.js
index 1dd63e3f..11c3041c 100644
--- a/docs/dist/v1/chartifact.editor.umd.js
+++ b/docs/dist/v1/chartifact.editor.umd.js
@@ -332,7 +332,11 @@ ${content}
 ${content}
 :::`;
   }
-  function targetMarkdown(page) {
+  const defaultOptions = {
+    extraNewlineCount: 1
+  };
+  function targetMarkdown(page, options) {
+    const finalOptions = { ...defaultOptions, ...options };
     const mdSections = [];
     const dataLoaders = page.dataLoaders || [];
     const variables = page.variables || [];
@@ -391,7 +395,8 @@ ${content}
         mdSections.unshift(tickWrap("#", JSON.stringify(page.notes, null, defaultJsonIndent)));
       }
     }
-    const markdown = mdSections.join("\n\n");
+    const newLines = "\n".repeat(1 + finalOptions.extraNewlineCount);
+    const markdown = mdSections.join(newLines);
     return markdown;
   }
   function dataLoaderMarkdown(dataSources, variables, tableElements) {
@@ -481,6 +486,26 @@ ${content}
             addSpec("image", imageSpec);
             break;
           }
+          case "mermaid": {
+            const { diagramText, template, variableId } = element;
+            if (diagramText) {
+              mdElements.push(tickWrap("mermaid", diagramText));
+            } else if (template) {
+              const mermaidSpec = {
+                template
+              };
+              if (variableId) {
+                mermaidSpec.variableId = variableId;
+              }
+              addSpec("mermaid", mermaidSpec);
+            } else if (variableId) {
+              const mermaidSpec = {
+                variableId
+              };
+              addSpec("mermaid", mermaidSpec, false);
+            }
+            break;
+          }
           case "presets": {
             const { presets } = element;
             const presetsSpec = presets;
diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index 91e162e6..a6d90fa5 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -332,7 +332,11 @@ ${content}
 ${content}
 :::`;
   }
-  function targetMarkdown(page) {
+  const defaultOptions$1 = {
+    extraNewlineCount: 1
+  };
+  function targetMarkdown(page, options) {
+    const finalOptions = { ...defaultOptions$1, ...options };
     const mdSections = [];
     const dataLoaders = page.dataLoaders || [];
     const variables = page.variables || [];
@@ -391,7 +395,8 @@ ${content}
         mdSections.unshift(tickWrap("#", JSON.stringify(page.notes, null, defaultJsonIndent)));
       }
     }
-    const markdown = mdSections.join("\n\n");
+    const newLines = "\n".repeat(1 + finalOptions.extraNewlineCount);
+    const markdown = mdSections.join(newLines);
     return markdown;
   }
   function dataLoaderMarkdown(dataSources, variables, tableElements) {
@@ -481,6 +486,26 @@ ${content}
             addSpec("image", imageSpec);
             break;
           }
+          case "mermaid": {
+            const { diagramText, template, variableId } = element;
+            if (diagramText) {
+              mdElements.push(tickWrap("mermaid", diagramText));
+            } else if (template) {
+              const mermaidSpec = {
+                template
+              };
+              if (variableId) {
+                mermaidSpec.variableId = variableId;
+              }
+              addSpec("mermaid", mermaidSpec);
+            } else if (variableId) {
+              const mermaidSpec = {
+                variableId
+              };
+              addSpec("mermaid", mermaidSpec, false);
+            }
+            break;
+          }
           case "presets": {
             const { presets } = element;
             const presetsSpec = presets;
@@ -1411,7 +1436,7 @@ ${guardedJs}
 ${message}
 
 ${details}`;
-        this.render("Error", markdown, void 0, true);
+        this.renderMarkdown(markdown);
       } else {
         this.previewDiv.innerHTML = "";
         const h1 = document.createElement("h1");
diff --git a/docs/dist/v1/chartifact.markdown.umd.js b/docs/dist/v1/chartifact.markdown.umd.js
index 0831c7de..292c2f2a 100644
--- a/docs/dist/v1/chartifact.markdown.umd.js
+++ b/docs/dist/v1/chartifact.markdown.umd.js
@@ -434,65 +434,61 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     };
     p.block.ruler.before("fence", `container_${n}`, I2, { alt: ["paragraph", "reference", "blockquote", "list"] }), p.renderer.rules[`container_${n}_open`] = g2, p.renderer.rules[`container_${n}_close`] = C2;
   };
-  const plugins = [];
-  function registerMarkdownPlugin(plugin) {
-    let insertIndex = plugins.length;
-    let minIndex = 0;
-    for (let i = 0; i < plugins.length; i++) {
-      if (plugins[i].hydratesBefore === plugin.name) {
-        minIndex = Math.max(minIndex, i + 1);
+  class DynamicUrl {
+    constructor(templateUrl, onChange) {
+      __publicField(this, "signals");
+      __publicField(this, "tokens");
+      __publicField(this, "lastUrl");
+      this.templateUrl = templateUrl;
+      this.onChange = onChange;
+      this.signals = {};
+      this.tokens = tokenizeTemplate(templateUrl);
+      const signalNames = this.tokens.filter((token) => token.type === "variable").map((token) => token.name);
+      if (signalNames.length === 0) {
+        onChange(templateUrl);
+        this.lastUrl = templateUrl;
+        return;
       }
+      signalNames.forEach((signalName) => {
+        this.signals[signalName] = void 0;
+      });
     }
-    if (plugin.hydratesBefore) {
-      const targetIndex = plugins.findIndex((p) => p.name === plugin.hydratesBefore);
-      if (targetIndex !== -1) {
-        insertIndex = targetIndex;
+    makeUrl() {
+      const signalNames = Object.keys(this.signals);
+      if (signalNames.length === 0) {
+        return this.templateUrl;
       }
-    }
-    insertIndex = Math.max(insertIndex, minIndex);
-    plugins.splice(insertIndex, 0, plugin);
-    return "register";
-  }
-  function create() {
-    var _a;
-    const md = new markdownit();
-    for (const plugin of plugins) {
-      (_a = plugin.initializePlugin) == null ? void 0 : _a.call(plugin, md);
-    }
-    md.use(G);
-    const containerOptions = { name: defaultCommonOptions.groupClassName };
-    md.use(R, containerOptions);
-    const originalFence = md.renderer.rules.fence;
-    md.renderer.rules.fence = function(tokens, idx, options, env, slf) {
-      const token = tokens[idx];
-      const info = token.info.trim();
-      const findPlugin = (pluginName2) => {
-        const plugin = plugins.find((p) => p.name === pluginName2);
-        if (plugin && plugin.fence) {
-          return plugin.fence(token, idx);
+      if (this.tokens.length === 1 && this.tokens[0].type === "variable") {
+        return this.signals[this.tokens[0].name] || "";
+      }
+      const urlParts = [];
+      this.tokens.forEach((token) => {
+        if (token.type === "literal") {
+          urlParts.push(token.value);
+        } else if (token.type === "variable") {
+          const signalValue = this.signals[token.name];
+          if (signalValue !== void 0) {
+            urlParts.push(encodeURIComponent(signalValue));
+          }
         }
-      };
-      if (info.startsWith("#")) {
-        return findPlugin("#");
-      } else {
-        const directPlugin = findPlugin(info);
-        if (directPlugin) {
-          return directPlugin;
-        } else if (info.startsWith("json ")) {
-          const jsonPluginName = info.slice(5).trim();
-          const jsonPlugin = findPlugin(jsonPluginName);
-          if (jsonPlugin) {
-            return jsonPlugin;
+      });
+      return urlParts.join("");
+    }
+    receiveBatch(batch) {
+      for (const [signalName, batchItem] of Object.entries(batch)) {
+        if (signalName in this.signals) {
+          if (batchItem.isData || batchItem.value === void 0) {
+            continue;
           }
+          this.signals[signalName] = batchItem.value.toString();
         }
       }
-      if (originalFence) {
-        return originalFence(tokens, idx, options, env, slf);
-      } else {
-        return "";
+      const newUrl = this.makeUrl();
+      if (newUrl !== this.lastUrl) {
+        this.onChange(newUrl);
+        this.lastUrl = newUrl;
       }
-    };
-    return md;
+    }
   }
   function getJsonScriptTag(container, errorHandler) {
     const scriptTag = container.previousElementSibling;
@@ -563,36 +559,501 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             flaggableSpec = { spec };
           }
         }
-        if (flaggableSpec) {
-          json = JSON.stringify(flaggableSpec);
-        }
-        return sanitizedHTML("div", { class: className2, id: `${pluginName2}-${index2}`, ...attrs }, json, true);
-      },
-      hydrateSpecs: (renderer, errorHandler) => {
-        var _a;
-        const flagged = [];
-        const containers = renderer.element.querySelectorAll(`.${className2}`);
-        for (const [index2, container] of Array.from(containers).entries()) {
-          const flaggableSpec = getJsonScriptTag(container, (e) => errorHandler(e, pluginName2, index2, "parse", container));
-          if (!flaggableSpec) continue;
-          const f = { approvedSpec: null, pluginName: pluginName2, containerId: container.id };
-          if (flaggableSpec.hasFlags) {
-            f.blockedSpec = flaggableSpec.spec;
-            f.reason = ((_a = flaggableSpec.reasons) == null ? void 0 : _a.join(", ")) || "Unknown reason";
-          } else {
-            f.approvedSpec = flaggableSpec.spec;
-          }
-          flagged.push(f);
+        if (flaggableSpec) {
+          json = JSON.stringify(flaggableSpec);
+        }
+        return sanitizedHTML("div", { class: className2, id: `${pluginName2}-${index2}`, ...attrs }, json, true);
+      },
+      hydrateSpecs: (renderer, errorHandler) => {
+        var _a;
+        const flagged = [];
+        const containers = renderer.element.querySelectorAll(`.${className2}`);
+        for (const [index2, container] of Array.from(containers).entries()) {
+          const flaggableSpec = getJsonScriptTag(container, (e) => errorHandler(e, pluginName2, index2, "parse", container));
+          if (!flaggableSpec) continue;
+          const f = { approvedSpec: null, pluginName: pluginName2, containerId: container.id };
+          if (flaggableSpec.hasFlags) {
+            f.blockedSpec = flaggableSpec.spec;
+            f.reason = ((_a = flaggableSpec.reasons) == null ? void 0 : _a.join(", ")) || "Unknown reason";
+          } else {
+            f.approvedSpec = flaggableSpec.spec;
+          }
+          flagged.push(f);
+        }
+        return flagged;
+      }
+    };
+    return plugin;
+  }
+  const ImageOpacity = {
+    full: "1",
+    loading: "0.1",
+    error: "0.5"
+  };
+  const pluginName$d = "image";
+  const className$b = pluginClassName(pluginName$d);
+  const imagePlugin = {
+    ...flaggableJsonPlugin(pluginName$d, className$b),
+    hydrateComponent: async (renderer, errorHandler, specs) => {
+      const imageInstances = [];
+      for (let index2 = 0; index2 < specs.length; index2++) {
+        const specReview = specs[index2];
+        if (!specReview.approvedSpec) {
+          continue;
+        }
+        const container = renderer.element.querySelector(`#${specReview.containerId}`);
+        const spec = specReview.approvedSpec;
+        container.innerHTML = createImageContainerTemplate("", spec.alt, spec.url, index2, errorHandler);
+        const { img, spinner, retryBtn, dynamicUrl } = createImageLoadingLogic(
+          container,
+          null,
+          (error) => {
+            errorHandler(error, pluginName$d, index2, "load", container, img.src);
+          }
+        );
+        const imageInstance = {
+          id: `${pluginName$d}-${index2}`,
+          spec,
+          img: null,
+          // Will be set below
+          spinner: null,
+          // Will be set below
+          dynamicUrl
+        };
+        imageInstance.img = img;
+        imageInstance.spinner = spinner;
+        if (spec.alt) img.alt = spec.alt;
+        if (spec.width) img.width = spec.width;
+        if (spec.height) img.height = spec.height;
+        imageInstances.push(imageInstance);
+      }
+      const instances = imageInstances.map((imageInstance, index2) => {
+        const { img, spinner, id, dynamicUrl } = imageInstance;
+        const signalNames = Object.keys((dynamicUrl == null ? void 0 : dynamicUrl.signals) || {});
+        return {
+          id,
+          initialSignals: Array.from(signalNames).map((name) => ({
+            name,
+            value: null,
+            priority: -1,
+            isData: false
+          })),
+          destroy: () => {
+            if (img) {
+              img.remove();
+            }
+            if (spinner) {
+              spinner.remove();
+            }
+          },
+          receiveBatch: async (batch, from) => {
+            dynamicUrl == null ? void 0 : dynamicUrl.receiveBatch(batch);
+          }
+        };
+      });
+      return instances;
+    }
+  };
+  const imgSpinner = `
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="10" stroke="gray" stroke-width="2" fill="none" stroke-dasharray="31.4" stroke-dashoffset="0">
+        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
+    </circle>
+</svg>
+`;
+  function createImageContainerTemplate(clasName, alt, src, instanceIndex, errorHandler) {
+    const tempImg = document.createElement("img");
+    if (src.includes("{{")) {
+      tempImg.setAttribute("src", "data:,");
+      tempImg.setAttribute("data-dynamic-url", src);
+    } else {
+      if (isSafeImageUrl(src)) {
+        tempImg.setAttribute("src", src);
+      } else {
+        errorHandler(new Error(`Unsafe image URL: ${src}`), pluginName$d, instanceIndex, "load", null, src);
+      }
+    }
+    tempImg.setAttribute("alt", alt);
+    const imgHtml = tempImg.outerHTML;
+    return `<span class="${clasName}" style="position: relative;display:inline-block;min-width:24px;min-height:10px;">
+        <span class="image-spinner" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
+            ${imgSpinner}
+        </span>
+        ${imgHtml}
+        <button type="button" class="image-retry" style="display: none;">Retry</button>
+    </span>`;
+  }
+  function createImageLoadingLogic(container, onSuccess, onError) {
+    container.style.position = "relative";
+    const img = container.querySelector("img");
+    const spinner = container.querySelector(".image-spinner");
+    const retryBtn = container.querySelector(".image-retry");
+    const dataDynamicUrl = img.getAttribute("data-dynamic-url");
+    img.onload = () => {
+      spinner.style.display = "none";
+      img.style.opacity = ImageOpacity.full;
+      img.style.display = "";
+      retryBtn.style.display = "none";
+      img.setAttribute("hasImage", "true");
+    };
+    img.onerror = () => {
+      spinner.style.display = "none";
+      img.style.opacity = ImageOpacity.error;
+      img.style.display = "none";
+      retryBtn.style.display = "";
+      retryBtn.disabled = false;
+      img.setAttribute("hasImage", "false");
+      onError == null ? void 0 : onError(new Error("Image failed to load"));
+    };
+    retryBtn.onclick = () => {
+      retryBtn.disabled = true;
+      spinner.style.display = "";
+      img.style.opacity = ImageOpacity.loading;
+      img.style.display = img.getAttribute("hasImage") ? "" : "none";
+      const src = img.src;
+      const onload = img.onload;
+      const onerror = img.onerror;
+      img.src = "data:,";
+      img.onload = null;
+      img.onerror = null;
+      setTimeout(() => {
+        img.onload = onload;
+        img.onerror = onerror;
+        img.src = src;
+      }, 100);
+    };
+    const result = { img, spinner, retryBtn };
+    if (dataDynamicUrl) {
+      const dynamicUrl = new DynamicUrl(dataDynamicUrl, (src) => {
+        if (isSafeImageUrl(src)) {
+          spinner.style.display = "";
+          img.src = src;
+          img.style.opacity = ImageOpacity.loading;
+        } else {
+          img.src = "";
+          spinner.style.display = "none";
+          img.style.opacity = ImageOpacity.full;
+        }
+      });
+      result.dynamicUrl = dynamicUrl;
+    }
+    return result;
+  }
+  function isSafeImageUrl(url) {
+    try {
+      if (url.startsWith("data:image/")) {
+        const safeMimeTypes = [
+          "data:image/png",
+          "data:image/jpeg",
+          "data:image/gif",
+          "data:image/webp",
+          "data:image/bmp",
+          "data:image/x-icon"
+        ];
+        for (const mime of safeMimeTypes) {
+          if (url.startsWith(mime)) {
+            return true;
+          }
+        }
+        return false;
+      }
+      const parsed = new URL(url, window.location.origin);
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  }
+  function decorateDynamicUrl(tokens, idx, attrName, elementType) {
+    const token = tokens[idx];
+    const attrValue = token.attrGet(attrName);
+    if (attrValue && attrValue.includes("%7B%7B")) {
+      if (!token.attrs) {
+        token.attrs = [];
+      }
+      token.attrSet("dynamic-url", decodeURIComponent(attrValue));
+      token.attrSet(attrName, "");
+    }
+    return token;
+  }
+  function decorateFenceWithPlaceholders(tokens, idx) {
+    const token = tokens[idx];
+    const content = token.content;
+    if (content && content.includes("{{")) {
+      const templateTokens = tokenizeTemplate(content);
+      const variableTokens = templateTokens.filter((t) => t.type === "variable");
+      if (variableTokens.length > 0) {
+        const templateContent = encodeURIComponent(content);
+        const placeholderData = variableTokens.map((t) => `data-placeholder-${t.name.toLowerCase()}="true"`).join(" ");
+        return `<pre class="has-placeholders" data-template-content="${templateContent}" ${placeholderData}><code></code></pre>`;
+      }
+    }
+    return null;
+  }
+  const pluginName$c = "placeholders";
+  const imageClassName = pluginClassName(pluginName$c + "_image");
+  const placeholdersPlugin = {
+    name: pluginName$c,
+    initializePlugin: async (md) => {
+      md.use(function(md2) {
+        md2.inline.ruler.after("emphasis", "dynamic_placeholder", function(state, silent) {
+          let token;
+          const max = state.posMax;
+          const start = state.pos;
+          if (state.src.charCodeAt(start) !== 123 || state.src.charCodeAt(start + 1) !== 123) {
+            return false;
+          }
+          for (let pos = start + 2; pos < max; pos++) {
+            if (state.src.charCodeAt(pos) === 125 && state.src.charCodeAt(pos + 1) === 125) {
+              if (!silent) {
+                state.pos = start + 2;
+                state.posMax = pos;
+                token = state.push("dynamic_placeholder", "", 0);
+                token.markup = state.src.slice(start, pos + 2);
+                token.content = state.src.slice(state.pos, state.posMax);
+                state.pos = pos + 2;
+                state.posMax = max;
+              }
+              return true;
+            }
+          }
+          return false;
+        });
+        md2.renderer.rules["dynamic_placeholder"] = function(tokens, idx) {
+          const key = tokens[idx].content.trim();
+          return `<span class="dynamic-placeholder" data-key="${key}">{${key}}</span>`;
+        };
+      });
+      md.renderer.rules["link_open"] = function(tokens, idx, options, env, slf) {
+        decorateDynamicUrl(tokens, idx, "href");
+        return slf.renderToken(tokens, idx, options);
+      };
+      md.renderer.rules["image"] = function(tokens, idx, options, env, slf) {
+        const alt = tokens[idx].attrGet("alt");
+        const src = tokens[idx].attrGet("src");
+        let error;
+        const html = createImageContainerTemplate(imageClassName, alt, decodeURIComponent(src), idx, (e, pluginName2, instanceIndex, phase, container, detail) => {
+          error = sanitizeHtmlComment(`Error in plugin ${pluginName2} instance ${instanceIndex} phase ${phase}: ${e.message} ${detail}`);
+        });
+        return error || html;
+      };
+    },
+    hydrateComponent: async (renderer, errorHandler) => {
+      const dynamicUrlMap = /* @__PURE__ */ new WeakMap();
+      const templateHandlerMap = /* @__PURE__ */ new WeakMap();
+      const placeholders = renderer.element.querySelectorAll(".dynamic-placeholder");
+      const dynamicUrls = renderer.element.querySelectorAll("[dynamic-url]");
+      const dynamicImages = renderer.element.querySelectorAll(`.${imageClassName}`);
+      const codeBlocksWithPlaceholders = renderer.element.querySelectorAll(".has-placeholders[data-template-content]");
+      const elementsByKeys = /* @__PURE__ */ new Map();
+      for (const placeholder of Array.from(placeholders)) {
+        const key = placeholder.getAttribute("data-key");
+        if (!key) {
+          continue;
+        }
+        if (elementsByKeys.has(key)) {
+          elementsByKeys.get(key).push(placeholder);
+        } else {
+          elementsByKeys.set(key, [placeholder]);
+        }
+      }
+      for (const element of Array.from(codeBlocksWithPlaceholders)) {
+        const templateContent = element.getAttribute("data-template-content");
+        if (!templateContent) {
+          continue;
+        }
+        const templateText = decodeURIComponent(templateContent);
+        const tokens = tokenizeTemplate(templateText);
+        const variableTokens = tokens.filter((token) => token.type === "variable");
+        const templateHandler = {
+          signals: {},
+          update: () => {
+            let content = "";
+            for (const token of tokens) {
+              if (token.type === "literal") {
+                content += token.value;
+              } else if (token.type === "variable") {
+                content += templateHandler.signals[token.name] || "";
+              }
+            }
+            element.innerHTML = `<code>${content}</code>`;
+          }
+        };
+        variableTokens.forEach((token) => {
+          templateHandler.signals[token.name] = "";
+        });
+        templateHandlerMap.set(element, templateHandler);
+        variableTokens.forEach((token) => {
+          const key = token.name;
+          if (elementsByKeys.has(key)) {
+            elementsByKeys.get(key).push(element);
+          } else {
+            elementsByKeys.set(key, [element]);
+          }
+        });
+      }
+      for (const element of Array.from(dynamicUrls)) {
+        const templateUrl = element.getAttribute("dynamic-url");
+        if (!templateUrl) {
+          continue;
+        }
+        if (element.tagName === "A") {
+          const dynamicUrl = new DynamicUrl(templateUrl, (url) => {
+            element.setAttribute("href", url);
+          });
+          dynamicUrlMap.set(element, dynamicUrl);
+          for (const key of Object.keys(dynamicUrl.signals)) {
+            if (elementsByKeys.has(key)) {
+              elementsByKeys.get(key).push(element);
+            } else {
+              elementsByKeys.set(key, [element]);
+            }
+          }
+        }
+      }
+      for (const element of Array.from(dynamicImages)) {
+        const { dynamicUrl, img } = createImageLoadingLogic(element, null, (error) => {
+          const index2 = -1;
+          errorHandler(error, pluginName$c, index2, "load", element, img.src);
+        });
+        if (!dynamicUrl) {
+          continue;
+        }
+        dynamicUrlMap.set(element, dynamicUrl);
+        for (const key of Object.keys(dynamicUrl.signals)) {
+          if (elementsByKeys.has(key)) {
+            elementsByKeys.get(key).push(element);
+          } else {
+            elementsByKeys.set(key, [element]);
+          }
+        }
+      }
+      const initialSignals = Array.from(elementsByKeys.keys()).map((name) => {
+        const prioritizedSignal = {
+          name,
+          value: null,
+          priority: -1,
+          isData: false
+        };
+        return prioritizedSignal;
+      });
+      const instances = [
+        {
+          id: pluginName$c,
+          initialSignals,
+          receiveBatch: async (batch) => {
+            var _a, _b;
+            for (const key of Object.keys(batch)) {
+              const elements = elementsByKeys.get(key) || [];
+              for (const element of elements) {
+                if (element.classList.contains("dynamic-placeholder")) {
+                  const markdownContent = ((_a = batch[key].value) == null ? void 0 : _a.toString()) || "";
+                  const parsedMarkdown = isMarkdownInline(markdownContent) ? renderer.md.renderInline(markdownContent) : renderer.md.render(markdownContent);
+                  element.innerHTML = parsedMarkdown;
+                } else if (element.hasAttribute("dynamic-url")) {
+                  const dynamicUrl = dynamicUrlMap.get(element);
+                  if (dynamicUrl) {
+                    dynamicUrl.receiveBatch(batch);
+                  }
+                } else if (element.classList.contains(imageClassName)) {
+                  const dynamicUrl = dynamicUrlMap.get(element);
+                  if (dynamicUrl) {
+                    dynamicUrl.receiveBatch(batch);
+                  }
+                } else if (element.hasAttribute("data-template-content")) {
+                  const templateHandler = templateHandlerMap.get(element);
+                  if (templateHandler && templateHandler.signals) {
+                    templateHandler.signals[key] = ((_b = batch[key].value) == null ? void 0 : _b.toString()) || "";
+                    templateHandler.update();
+                  }
+                }
+              }
+            }
+          }
+        }
+      ];
+      return instances;
+    }
+  };
+  function isMarkdownInline(markdown) {
+    if (!markdown.includes("\n")) {
+      return true;
+    }
+    const blockElements = ["#", "-", "*", ">", "```", "~~~"];
+    for (const element of blockElements) {
+      if (markdown.trim().startsWith(element)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  const plugins = [];
+  function registerMarkdownPlugin(plugin) {
+    let insertIndex = plugins.length;
+    let minIndex = 0;
+    for (let i = 0; i < plugins.length; i++) {
+      if (plugins[i].hydratesBefore === plugin.name) {
+        minIndex = Math.max(minIndex, i + 1);
+      }
+    }
+    if (plugin.hydratesBefore) {
+      const targetIndex = plugins.findIndex((p) => p.name === plugin.hydratesBefore);
+      if (targetIndex !== -1) {
+        insertIndex = targetIndex;
+      }
+    }
+    insertIndex = Math.max(insertIndex, minIndex);
+    plugins.splice(insertIndex, 0, plugin);
+    return "register";
+  }
+  function create() {
+    var _a;
+    const md = new markdownit();
+    for (const plugin of plugins) {
+      (_a = plugin.initializePlugin) == null ? void 0 : _a.call(plugin, md);
+    }
+    md.use(G);
+    const containerOptions = { name: defaultCommonOptions.groupClassName };
+    md.use(R, containerOptions);
+    const originalFence = md.renderer.rules.fence;
+    md.renderer.rules.fence = function(tokens, idx, options, env, slf) {
+      const token = tokens[idx];
+      const info = token.info.trim();
+      const findPlugin = (pluginName2) => {
+        const plugin = plugins.find((p) => p.name === pluginName2);
+        if (plugin && plugin.fence) {
+          return plugin.fence(token, idx);
+        }
+      };
+      if (info.startsWith("#")) {
+        return findPlugin("#");
+      } else {
+        const directPlugin = findPlugin(info);
+        if (directPlugin) {
+          return directPlugin;
+        } else if (info.startsWith("json ")) {
+          const jsonPluginName = info.slice(5).trim();
+          const jsonPlugin = findPlugin(jsonPluginName);
+          if (jsonPlugin) {
+            return jsonPlugin;
+          }
+        }
+      }
+      if (originalFence) {
+        const originalResult = originalFence(tokens, idx, options, env, slf);
+        if (token.content && token.content.includes("{{")) {
+          return decorateFenceWithPlaceholders([token], 0);
         }
-        return flagged;
+        return originalResult;
+      } else {
+        return "";
       }
     };
-    return plugin;
+    return md;
   }
-  const pluginName$c = "checkbox";
-  const className$a = pluginClassName(pluginName$c);
+  const pluginName$b = "checkbox";
+  const className$a = pluginClassName(pluginName$b);
   const checkboxPlugin = {
-    ...flaggableJsonPlugin(pluginName$c, className$a),
+    ...flaggableJsonPlugin(pluginName$b, className$a),
     hydrateComponent: async (renderer, errorHandler, specs) => {
       const { signalBus } = renderer;
       const checkboxInstances = [];
@@ -613,7 +1074,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
                 </form>`;
         container.innerHTML = html;
         const element = container.querySelector('input[type="checkbox"]');
-        const checkboxInstance = { id: `${pluginName$c}-${index2}`, spec, element };
+        const checkboxInstance = { id: `${pluginName$b}-${index2}`, spec, element };
         checkboxInstances.push(checkboxInstance);
       }
       const instances = checkboxInstances.map((checkboxInstance) => {
@@ -656,9 +1117,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return instances;
     }
   };
-  const pluginName$b = "#";
+  const pluginName$a = "#";
   const commentPlugin = {
-    name: pluginName$b,
+    name: pluginName$a,
     fence: (token) => {
       const content = token.content.trim();
       return sanitizeHtmlComment(content);
@@ -865,14 +1326,14 @@ ${reconstitutedRules.join("\n\n")}
     }
     return result;
   }
-  const pluginName$a = "css";
-  const className$9 = pluginClassName(pluginName$a);
+  const pluginName$9 = "css";
+  const className$9 = pluginClassName(pluginName$9);
   const cssPlugin = {
-    ...flaggableJsonPlugin(pluginName$a, className$9),
+    ...flaggableJsonPlugin(pluginName$9, className$9),
     fence: (token, index2) => {
       const cssContent = token.content.trim();
       const categorizedCss = categorizeCss(cssContent);
-      return sanitizedHTML("div", { id: `${pluginName$a}-${index2}`, class: className$9 }, JSON.stringify(categorizedCss), true);
+      return sanitizedHTML("div", { id: `${pluginName$9}-${index2}`, class: className$9 }, JSON.stringify(categorizedCss), true);
     },
     hydrateComponent: async (renderer, errorHandler, specs) => {
       const cssInstances = [];
@@ -894,7 +1355,7 @@ ${reconstitutedRules.join("\n\n")}
           target.appendChild(styleElement);
           comments.push(`<!-- CSS styles applied to ${renderer.shadowRoot ? "shadow DOM" : "document"} -->`);
           cssInstances.push({
-            id: `${pluginName$a}-${index2}`,
+            id: `${pluginName$9}-${index2}`,
             element: styleElement
           });
         } else {
@@ -992,8 +1453,8 @@ ${reconstitutedRules.join("\n\n")}
     generateRule("hero", "h1");
     return cssRules.join("\n\n");
   }
-  const pluginName$9 = "google-fonts";
-  const className$8 = pluginClassName(pluginName$9);
+  const pluginName$8 = "google-fonts";
+  const className$8 = pluginClassName(pluginName$8);
   function inspectGoogleFontsSpec(spec) {
     var _a, _b;
     const reasons = [];
@@ -1022,7 +1483,7 @@ ${reconstitutedRules.join("\n\n")}
     };
   }
   const googleFontsPlugin = {
-    ...flaggableJsonPlugin(pluginName$9, className$8, inspectGoogleFontsSpec),
+    ...flaggableJsonPlugin(pluginName$8, className$8, inspectGoogleFontsSpec),
     hydrateComponent: async (renderer, errorHandler, specs) => {
       const googleFontsInstances = [];
       let emitted = false;
@@ -1093,10 +1554,10 @@ ${reconstitutedRules.join("\n\n")}
       return instances;
     }
   };
-  const pluginName$8 = "dropdown";
-  const className$7 = pluginClassName(pluginName$8);
+  const pluginName$7 = "dropdown";
+  const className$7 = pluginClassName(pluginName$7);
   const dropdownPlugin = {
-    ...flaggableJsonPlugin(pluginName$8, className$7),
+    ...flaggableJsonPlugin(pluginName$7, className$7),
     hydrateComponent: async (renderer, errorHandler, specs) => {
       const { signalBus } = renderer;
       const dropdownInstances = [];
@@ -1119,7 +1580,7 @@ ${reconstitutedRules.join("\n\n")}
         container.innerHTML = html;
         const element = container.querySelector("select");
         setSelectOptions(element, spec.multiple ?? false, spec.options ?? [], spec.value ?? (spec.multiple ? [] : ""));
-        const dropdownInstance = { id: `${pluginName$8}-${index2}`, spec, element };
+        const dropdownInstance = { id: `${pluginName$7}-${index2}`, spec, element };
         dropdownInstances.push(dropdownInstance);
       }
       const instances = dropdownInstances.map((dropdownInstance, index2) => {
@@ -1220,428 +1681,287 @@ ${reconstitutedRules.join("\n\n")}
             options = [selected];
           }
         }
-      } else {
-        if (selected) {
-          options = [selected];
-        }
-      }
-    }
-    if (!options || options.length === 0) {
-      return;
-    }
-    options.forEach((optionValue) => {
-      const optionElement = document.createElement("option");
-      optionElement.value = optionValue;
-      optionElement.textContent = optionValue;
-      let isSelected = false;
-      if (multiple) {
-        isSelected = (selected || []).includes(optionValue);
-      } else {
-        isSelected = selected === optionValue;
-      }
-      optionElement.selected = isSelected;
-      selectElement.appendChild(optionElement);
-    });
-  }
-  class DynamicUrl {
-    constructor(templateUrl, onChange) {
-      __publicField(this, "signals");
-      __publicField(this, "tokens");
-      __publicField(this, "lastUrl");
-      this.templateUrl = templateUrl;
-      this.onChange = onChange;
-      this.signals = {};
-      this.tokens = tokenizeTemplate(templateUrl);
-      const signalNames = this.tokens.filter((token) => token.type === "variable").map((token) => token.name);
-      if (signalNames.length === 0) {
-        onChange(templateUrl);
-        this.lastUrl = templateUrl;
-        return;
-      }
-      signalNames.forEach((signalName) => {
-        this.signals[signalName] = void 0;
-      });
-    }
-    makeUrl() {
-      const signalNames = Object.keys(this.signals);
-      if (signalNames.length === 0) {
-        return this.templateUrl;
-      }
-      if (this.tokens.length === 1 && this.tokens[0].type === "variable") {
-        return this.signals[this.tokens[0].name] || "";
-      }
-      const urlParts = [];
-      this.tokens.forEach((token) => {
-        if (token.type === "literal") {
-          urlParts.push(token.value);
-        } else if (token.type === "variable") {
-          const signalValue = this.signals[token.name];
-          if (signalValue !== void 0) {
-            urlParts.push(encodeURIComponent(signalValue));
-          }
-        }
-      });
-      return urlParts.join("");
-    }
-    receiveBatch(batch) {
-      for (const [signalName, batchItem] of Object.entries(batch)) {
-        if (signalName in this.signals) {
-          if (batchItem.isData || batchItem.value === void 0) {
-            continue;
-          }
-          this.signals[signalName] = batchItem.value.toString();
-        }
-      }
-      const newUrl = this.makeUrl();
-      if (newUrl !== this.lastUrl) {
-        this.onChange(newUrl);
-        this.lastUrl = newUrl;
-      }
-    }
-  }
-  const ImageOpacity = {
-    full: "1",
-    loading: "0.1",
-    error: "0.5"
-  };
-  const pluginName$7 = "image";
-  const className$6 = pluginClassName(pluginName$7);
-  const imagePlugin = {
-    ...flaggableJsonPlugin(pluginName$7, className$6),
-    hydrateComponent: async (renderer, errorHandler, specs) => {
-      const imageInstances = [];
-      for (let index2 = 0; index2 < specs.length; index2++) {
-        const specReview = specs[index2];
-        if (!specReview.approvedSpec) {
-          continue;
-        }
-        const container = renderer.element.querySelector(`#${specReview.containerId}`);
-        const spec = specReview.approvedSpec;
-        container.innerHTML = createImageContainerTemplate("", spec.alt, spec.url, index2, errorHandler);
-        const { img, spinner, retryBtn, dynamicUrl } = createImageLoadingLogic(
-          container,
-          null,
-          (error) => {
-            errorHandler(error, pluginName$7, index2, "load", container, img.src);
-          }
-        );
-        const imageInstance = {
-          id: `${pluginName$7}-${index2}`,
-          spec,
-          img: null,
-          // Will be set below
-          spinner: null,
-          // Will be set below
-          dynamicUrl
-        };
-        imageInstance.img = img;
-        imageInstance.spinner = spinner;
-        if (spec.alt) img.alt = spec.alt;
-        if (spec.width) img.width = spec.width;
-        if (spec.height) img.height = spec.height;
-        imageInstances.push(imageInstance);
-      }
-      const instances = imageInstances.map((imageInstance, index2) => {
-        const { img, spinner, id, dynamicUrl } = imageInstance;
-        const signalNames = Object.keys((dynamicUrl == null ? void 0 : dynamicUrl.signals) || {});
-        return {
-          id,
-          initialSignals: Array.from(signalNames).map((name) => ({
-            name,
-            value: null,
-            priority: -1,
-            isData: false
-          })),
-          destroy: () => {
-            if (img) {
-              img.remove();
-            }
-            if (spinner) {
-              spinner.remove();
-            }
-          },
-          receiveBatch: async (batch, from) => {
-            dynamicUrl == null ? void 0 : dynamicUrl.receiveBatch(batch);
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  const imgSpinner = `
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="12" cy="12" r="10" stroke="gray" stroke-width="2" fill="none" stroke-dasharray="31.4" stroke-dashoffset="0">
-        <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
-    </circle>
-</svg>
-`;
-  function createImageContainerTemplate(clasName, alt, src, instanceIndex, errorHandler) {
-    const tempImg = document.createElement("img");
-    if (src.includes("{{")) {
-      tempImg.setAttribute("src", "data:,");
-      tempImg.setAttribute("data-dynamic-url", src);
-    } else {
-      if (isSafeImageUrl(src)) {
-        tempImg.setAttribute("src", src);
-      } else {
-        errorHandler(new Error(`Unsafe image URL: ${src}`), pluginName$7, instanceIndex, "load", null, src);
-      }
-    }
-    tempImg.setAttribute("alt", alt);
-    const imgHtml = tempImg.outerHTML;
-    return `<span class="${clasName}" style="position: relative;display:inline-block;min-width:24px;min-height:10px;">
-        <span class="image-spinner" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
-            ${imgSpinner}
-        </span>
-        ${imgHtml}
-        <button type="button" class="image-retry" style="display: none;">Retry</button>
-    </span>`;
-  }
-  function createImageLoadingLogic(container, onSuccess, onError) {
-    container.style.position = "relative";
-    const img = container.querySelector("img");
-    const spinner = container.querySelector(".image-spinner");
-    const retryBtn = container.querySelector(".image-retry");
-    const dataDynamicUrl = img.getAttribute("data-dynamic-url");
-    img.onload = () => {
-      spinner.style.display = "none";
-      img.style.opacity = ImageOpacity.full;
-      img.style.display = "";
-      retryBtn.style.display = "none";
-      img.setAttribute("hasImage", "true");
-    };
-    img.onerror = () => {
-      spinner.style.display = "none";
-      img.style.opacity = ImageOpacity.error;
-      img.style.display = "none";
-      retryBtn.style.display = "";
-      retryBtn.disabled = false;
-      img.setAttribute("hasImage", "false");
-      onError == null ? void 0 : onError(new Error("Image failed to load"));
-    };
-    retryBtn.onclick = () => {
-      retryBtn.disabled = true;
-      spinner.style.display = "";
-      img.style.opacity = ImageOpacity.loading;
-      img.style.display = img.getAttribute("hasImage") ? "" : "none";
-      const src = img.src;
-      const onload = img.onload;
-      const onerror = img.onerror;
-      img.src = "data:,";
-      img.onload = null;
-      img.onerror = null;
-      setTimeout(() => {
-        img.onload = onload;
-        img.onerror = onerror;
-        img.src = src;
-      }, 100);
-    };
-    const result = { img, spinner, retryBtn };
-    if (dataDynamicUrl) {
-      const dynamicUrl = new DynamicUrl(dataDynamicUrl, (src) => {
-        if (isSafeImageUrl(src)) {
-          spinner.style.display = "";
-          img.src = src;
-          img.style.opacity = ImageOpacity.loading;
-        } else {
-          img.src = "";
-          spinner.style.display = "none";
-          img.style.opacity = ImageOpacity.full;
+      } else {
+        if (selected) {
+          options = [selected];
         }
-      });
-      result.dynamicUrl = dynamicUrl;
+      }
     }
-    return result;
+    if (!options || options.length === 0) {
+      return;
+    }
+    options.forEach((optionValue) => {
+      const optionElement = document.createElement("option");
+      optionElement.value = optionValue;
+      optionElement.textContent = optionValue;
+      let isSelected = false;
+      if (multiple) {
+        isSelected = (selected || []).includes(optionValue);
+      } else {
+        isSelected = selected === optionValue;
+      }
+      optionElement.selected = isSelected;
+      selectElement.appendChild(optionElement);
+    });
   }
-  function isSafeImageUrl(url) {
-    try {
-      if (url.startsWith("data:image/")) {
-        const safeMimeTypes = [
-          "data:image/png",
-          "data:image/jpeg",
-          "data:image/gif",
-          "data:image/webp",
-          "data:image/bmp",
-          "data:image/x-icon"
-        ];
-        for (const mime of safeMimeTypes) {
-          if (url.startsWith(mime)) {
-            return true;
+  const pluginName$6 = "mermaid";
+  const className$6 = pluginClassName(pluginName$6);
+  function inspectMermaidSpec(spec) {
+    const reasons = [];
+    let hasFlags = false;
+    if (spec.diagramText) {
+      const dangerousPatterns = [
+        /javascript:/i,
+        /<script/i,
+        /onclick=/i,
+        /onerror=/i,
+        /onload=/i,
+        /href\s*=\s*["']javascript:/i
+      ];
+      for (const pattern of dangerousPatterns) {
+        if (pattern.test(spec.diagramText)) {
+          hasFlags = true;
+          reasons.push("Potentially unsafe content detected in diagram");
+          break;
+        }
+      }
+    } else {
+      if (spec.template && typeof spec.template !== "object") {
+        hasFlags = true;
+        reasons.push("template must be an object if provided");
+      } else if (spec.template) {
+        if (!spec.template.header || typeof spec.template.header !== "string") {
+          hasFlags = true;
+          reasons.push("template.header must be a non-empty string");
+        }
+        if (!spec.template.lineTemplates || typeof spec.template.lineTemplates !== "object") {
+          hasFlags = true;
+          reasons.push("template.lineTemplates must be an object");
+        } else {
+          for (const [lineTemplateName, lineTemplate] of Object.entries(spec.template.lineTemplates)) {
+            if (typeof lineTemplate !== "string") {
+              hasFlags = true;
+              reasons.push(`Template '${lineTemplateName}' must be a string`);
+            }
           }
         }
-        return false;
+        if (!spec.template.dataSourceName) {
+          hasFlags = true;
+          reasons.push("Must specify dataSourceName for dynamic content");
+        }
       }
-      const parsed = new URL(url, window.location.origin);
-      return parsed.protocol === "http:" || parsed.protocol === "https:";
-    } catch {
-      return false;
     }
+    return {
+      spec,
+      hasFlags,
+      reasons
+    };
   }
-  function decorateDynamicUrl(tokens, idx, attrName, elementType) {
-    const token = tokens[idx];
-    const attrValue = token.attrGet(attrName);
-    if (attrValue && attrValue.includes("%7B%7B")) {
-      if (!token.attrs) {
-        token.attrs = [];
-      }
-      token.attrSet("dynamic-url", decodeURIComponent(attrValue));
-      token.attrSet(attrName, "");
-    }
-    return token;
+  async function initializeMermaid() {
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: "strict"
+    });
   }
-  const pluginName$6 = "placeholders";
-  const imageClassName = pluginClassName(pluginName$6 + "_image");
-  const placeholdersPlugin = {
-    name: pluginName$6,
-    initializePlugin: async (md) => {
-      md.use(function(md2) {
-        md2.inline.ruler.after("emphasis", "dynamic_placeholder", function(state, silent) {
-          let token;
-          const max = state.posMax;
-          const start = state.pos;
-          if (state.src.charCodeAt(start) !== 123 || state.src.charCodeAt(start + 1) !== 123) {
-            return false;
-          }
-          for (let pos = start + 2; pos < max; pos++) {
-            if (state.src.charCodeAt(pos) === 125 && state.src.charCodeAt(pos + 1) === 125) {
-              if (!silent) {
-                state.pos = start + 2;
-                state.posMax = pos;
-                token = state.push("dynamic_placeholder", "", 0);
-                token.markup = state.src.slice(start, pos + 2);
-                token.content = state.src.slice(state.pos, state.posMax);
-                state.pos = pos + 2;
-                state.posMax = max;
-              }
-              return true;
-            }
-          }
-          return false;
-        });
-        md2.renderer.rules["dynamic_placeholder"] = function(tokens, idx) {
-          const key = tokens[idx].content.trim();
-          return `<span class="dynamic-placeholder" data-key="${key}">{${key}}</span>`;
-        };
-      });
-      md.renderer.rules["link_open"] = function(tokens, idx, options, env, slf) {
-        decorateDynamicUrl(tokens, idx, "href");
-        return slf.renderToken(tokens, idx, options);
-      };
-      md.renderer.rules["image"] = function(tokens, idx, options, env, slf) {
-        const alt = tokens[idx].attrGet("alt");
-        const src = tokens[idx].attrGet("src");
-        let error;
-        const html = createImageContainerTemplate(imageClassName, alt, decodeURIComponent(src), idx, (e, pluginName2, instanceIndex, phase, container, detail) => {
-          error = sanitizeHtmlComment(`Error in plugin ${pluginName2} instance ${instanceIndex} phase ${phase}: ${e.message} ${detail}`);
-        });
-        return error || html;
+  if (typeof mermaid !== "undefined") {
+    initializeMermaid();
+  }
+  let mermaidLoadPromise = null;
+  function loadMermaidFromCDN() {
+    if (mermaidLoadPromise) return mermaidLoadPromise;
+    mermaidLoadPromise = new Promise((resolve, reject) => {
+      const script = document.createElement("script");
+      script.src = "https://cdn.jsdelivr.net/npm/mermaid@11.10.0/dist/mermaid.min.js";
+      script.async = true;
+      script.onload = () => {
+        initializeMermaid();
+        resolve();
       };
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const dynamicUrlMap = /* @__PURE__ */ new WeakMap();
-      const placeholders = renderer.element.querySelectorAll(".dynamic-placeholder");
-      const dynamicUrls = renderer.element.querySelectorAll("[dynamic-url]");
-      const dynamicImages = renderer.element.querySelectorAll(`.${imageClassName}`);
-      const elementsByKeys = /* @__PURE__ */ new Map();
-      for (const placeholder of Array.from(placeholders)) {
-        const key = placeholder.getAttribute("data-key");
-        if (!key) {
-          continue;
-        }
-        if (elementsByKeys.has(key)) {
-          elementsByKeys.get(key).push(placeholder);
+      script.onerror = () => reject(new Error("Failed to load Mermaid from CDN"));
+      document.head.appendChild(script);
+    });
+    return mermaidLoadPromise;
+  }
+  const mermaidPlugin = {
+    ...flaggableJsonPlugin(pluginName$6, className$6),
+    fence: (token, index2) => {
+      const content = token.content.trim();
+      let spec;
+      let flaggableSpec;
+      try {
+        const parsed = JSON.parse(content);
+        if (parsed && typeof parsed === "object") {
+          spec = parsed;
         } else {
-          elementsByKeys.set(key, [placeholder]);
+          spec = { diagramText: content };
         }
+      } catch (e) {
+        spec = { diagramText: content };
       }
-      for (const element of Array.from(dynamicUrls)) {
-        const templateUrl = element.getAttribute("dynamic-url");
-        if (!templateUrl) {
+      flaggableSpec = inspectMermaidSpec(spec);
+      const json = JSON.stringify(flaggableSpec);
+      return sanitizedHTML("div", { class: className$6, id: `${pluginName$6}-${index2}` }, json, true);
+    },
+    hydrateComponent: async (renderer, errorHandler, specs) => {
+      const { signalBus } = renderer;
+      const mermaidInstances = [];
+      for (let index2 = 0; index2 < specs.length; index2++) {
+        const specReview = specs[index2];
+        if (!specReview.approvedSpec) {
           continue;
         }
-        if (element.tagName === "A") {
-          const dynamicUrl = new DynamicUrl(templateUrl, (url) => {
-            element.setAttribute("href", url);
-          });
-          dynamicUrlMap.set(element, dynamicUrl);
-          for (const key of Object.keys(dynamicUrl.signals)) {
-            if (elementsByKeys.has(key)) {
-              elementsByKeys.get(key).push(element);
-            } else {
-              elementsByKeys.set(key, [element]);
-            }
-          }
-        }
-      }
-      for (const element of Array.from(dynamicImages)) {
-        const { dynamicUrl, img } = createImageLoadingLogic(element, null, (error) => {
-          const index2 = -1;
-          errorHandler(error, pluginName$6, index2, "load", element, img.src);
-        });
-        if (!dynamicUrl) {
+        const container = renderer.element.querySelector(`#${specReview.containerId}`);
+        if (!container) {
           continue;
         }
-        dynamicUrlMap.set(element, dynamicUrl);
-        for (const key of Object.keys(dynamicUrl.signals)) {
-          if (elementsByKeys.has(key)) {
-            elementsByKeys.get(key).push(element);
-          } else {
-            elementsByKeys.set(key, [element]);
-          }
+        const spec = specReview.approvedSpec;
+        const { template } = spec;
+        container.innerHTML = `<div class="mermaid-loading">Loading diagram...</div>`;
+        const tokens = tokenizeTemplate((template == null ? void 0 : template.header) || "") || [];
+        const mermaidInstance = {
+          id: `${pluginName$6}-${index2}`,
+          spec,
+          container,
+          signals: {},
+          tokens,
+          lastRenderedDiagram: null
+        };
+        mermaidInstances.push(mermaidInstance);
+        if (spec.diagramText && typeof spec.diagramText === "string") {
+          await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, spec.diagramText, errorHandler, pluginName$6, index2);
         }
       }
-      const initialSignals = Array.from(elementsByKeys.keys()).map((name) => {
-        const prioritizedSignal = {
-          name,
+      const instances = mermaidInstances.map((mermaidInstance, index2) => {
+        const { spec, signals, tokens } = mermaidInstance;
+        const { template, variableId } = spec;
+        const initialSignals = tokens.filter((token) => token.type === "variable").map((token) => ({
+          name: token.name,
           value: null,
           priority: -1,
           isData: false
-        };
-        return prioritizedSignal;
-      });
-      const instances = [
-        {
-          id: pluginName$6,
+        }));
+        if (template == null ? void 0 : template.dataSourceName) {
+          initialSignals.push({
+            name: template.dataSourceName,
+            value: null,
+            priority: -1,
+            isData: true
+          });
+        }
+        if (variableId) {
+          initialSignals.push({
+            name: variableId,
+            value: "",
+            priority: 1,
+            isData: false
+          });
+        }
+        return {
+          ...mermaidInstance,
           initialSignals,
           receiveBatch: async (batch) => {
-            var _a;
-            for (const key of Object.keys(batch)) {
-              const elements = elementsByKeys.get(key) || [];
-              for (const element of elements) {
-                if (element.classList.contains("dynamic-placeholder")) {
-                  const markdownContent = ((_a = batch[key].value) == null ? void 0 : _a.toString()) || "";
-                  const parsedMarkdown = isMarkdownInline(markdownContent) ? renderer.md.renderInline(markdownContent) : renderer.md.render(markdownContent);
-                  element.innerHTML = parsedMarkdown;
-                } else if (element.hasAttribute("dynamic-url")) {
-                  const dynamicUrl = dynamicUrlMap.get(element);
-                  if (dynamicUrl) {
-                    dynamicUrl.receiveBatch(batch);
-                  }
-                } else if (element.classList.contains(imageClassName)) {
-                  const dynamicUrl = dynamicUrlMap.get(element);
-                  if (dynamicUrl) {
-                    dynamicUrl.receiveBatch(batch);
+            if (template) {
+              for (const [signalName, batchItem] of Object.entries(batch)) {
+                signals[signalName] = batchItem.value;
+              }
+              if (Array.isArray(signals[template.dataSourceName])) {
+                const diagramText = dataToDiagram(template, signals[template.dataSourceName], tokens, signals);
+                if (diagramText && mermaidInstance.lastRenderedDiagram !== diagramText) {
+                  if (spec.variableId) {
+                    signalBus.broadcast(mermaidInstance.id, {
+                      [spec.variableId]: {
+                        value: diagramText,
+                        isData: false
+                      }
+                    });
                   }
                 }
+                if (diagramText && mermaidInstance.lastRenderedDiagram !== diagramText) {
+                  await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, diagramText, errorHandler, pluginName$6, index2);
+                  mermaidInstance.lastRenderedDiagram = diagramText;
+                }
+              } else {
+                mermaidInstance.container.innerHTML = '<div class="error">No data available to render diagram</div>';
+              }
+            } else if (variableId && batch[variableId]) {
+              const value = batch[variableId].value;
+              if (typeof value === "string" && value.trim().length > 0) {
+                await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, value, errorHandler, pluginName$6, index2);
+                mermaidInstance.lastRenderedDiagram = value;
+              } else {
+                mermaidInstance.container.innerHTML = '<div class="error">No diagram to display</div>';
               }
             }
           }
-        }
-      ];
+        };
+      });
       return instances;
     }
   };
-  function isMarkdownInline(markdown) {
-    if (!markdown.includes("\n")) {
-      return true;
+  function isValidMermaid(diagramText) {
+    const lines = diagramText.split("\n");
+    return lines.length > 1 && lines[1].trim().length > 0;
+  }
+  async function renderRawDiagram(id, container, diagramText, errorHandler, pluginName2, index2) {
+    if (typeof mermaid === "undefined") {
+      await loadMermaidFromCDN();
     }
-    const blockElements = ["#", "-", "*", ">", "```", "~~~"];
-    for (const element of blockElements) {
-      if (markdown.trim().startsWith(element)) {
-        return false;
+    if (typeof mermaid === "undefined") {
+      container.innerHTML = '<div class="error">Mermaid library not loaded dynamically</div>';
+      return;
+    }
+    if (!isValidMermaid(diagramText)) {
+      container.innerHTML = '<div class="error">Invalid Mermaid diagram format</div>';
+      return;
+    }
+    try {
+      const { svg } = await mermaid.render(id, diagramText);
+      container.innerHTML = svg;
+    } catch (error) {
+      container.innerHTML = `<div class="error">Failed to render diagram ${id} <pre>${diagramText}</pre></div>`;
+      errorHandler(error instanceof Error ? error : new Error(String(error)), pluginName2, index2, "render", container);
+      document.querySelectorAll('div[id^="dmermaid-"]').forEach((el) => el.remove());
+    }
+  }
+  function dataToDiagram(template, data, tokens, signals) {
+    var _a;
+    const lines = [];
+    const parts = [];
+    tokens.forEach((token) => {
+      if (token.type === "literal") {
+        parts.push(token.value);
+      } else if (token.type === "variable") {
+        const signalValue = signals[token.name];
+        if (signalValue !== void 0) {
+          parts.push(encodeURIComponent(signalValue));
+        }
+      }
+    });
+    const header = parts.join("");
+    lines.push(header);
+    for (const item of data) {
+      const lineTemplateName = item["lineTemplate"];
+      const lineTemplate = (_a = template == null ? void 0 : template.lineTemplates) == null ? void 0 : _a[lineTemplateName];
+      if (!lineTemplate) {
+        console.warn(`Template '${lineTemplateName}' not found in lineTemplates`);
+        continue;
+      }
+      const tokens2 = tokenizeTemplate(lineTemplate);
+      let line = "";
+      for (const token of tokens2) {
+        if (token.type === "literal") {
+          line += token.value;
+        } else if (token.type === "variable") {
+          const value = item[token.name];
+          if (value !== void 0) {
+            line += String(value);
+          }
+        }
       }
+      lines.push(line);
     }
-    return true;
+    const diagramText = lines.join("\n");
+    return diagramText;
   }
   const pluginName$5 = "presets";
   const className$5 = pluginClassName(pluginName$5);
@@ -1881,7 +2201,8 @@ ${reconstitutedRules.join("\n\n")}
           container,
           table,
           built: false,
-          selectableRows
+          selectableRows,
+          listening: false
         };
         table.on("tableBuilt", () => {
           table.off("tableBuilt");
@@ -1915,17 +2236,17 @@ ${reconstitutedRules.join("\n\n")}
           data.forEach((row) => {
             delete row[deleteFieldname];
           });
-          const value = structuredClone(data);
           const batch = {
             [spec.variableId]: {
-              value,
+              value: data,
               isData: true
             }
           };
           signalBus.log(tabulatorInstance.id, "sending batch", batch);
           signalBus.broadcast(tabulatorInstance.id, batch);
         };
-        const setData = (data) => {
+        const setData = (_data) => {
+          const data = structuredClone(_data);
           table.setData(data).then(() => {
             let columns = table.getColumnDefinitions().filter((cd) => cd.field !== deleteFieldname).filter((cd) => cd.formatter !== "rowSelection");
             if (spec.editable) {
@@ -1959,7 +2280,9 @@ ${reconstitutedRules.join("\n\n")}
               });
             }
             table.setColumns(columns);
-            outputData();
+            if (tabulatorInstance.listening) {
+              outputData();
+            }
           }).catch((error) => {
             console.error(`Error setting data for Tabulator ${spec.variableId}:`, error);
           });
@@ -2003,6 +2326,10 @@ ${reconstitutedRules.join("\n\n")}
             }
           },
           beginListening(sharedSignals) {
+            tabulatorInstance.listening = true;
+            if (tabulatorInstance.built) {
+              outputData();
+            }
             if (selectableRows) {
               const hasMatchingSignal = sharedSignals.some(
                 ({ isData, signalName }) => isData && signalName === spec.variableId
@@ -2017,6 +2344,9 @@ ${reconstitutedRules.join("\n\n")}
               table.on("cellEdited", (cell) => {
                 outputData();
               });
+              table.on("rowMoved", (row) => {
+                outputData();
+              });
             }
           },
           getCurrentSignalValue() {
@@ -2145,7 +2475,13 @@ ${reconstitutedRules.join("\n\n")}
       }
       this.log(originId, "Broadcasting batch from", originId, batch);
       this.broadcastingStack.push(originId);
-      for (const peerId of this.peerDependencies[originId]) {
+      const peerDependencies = this.peerDependencies[originId];
+      if (!peerDependencies || peerDependencies.length === 0) {
+        this.log(originId, "No peers to broadcast to");
+        this.broadcastingStack.pop();
+        return;
+      }
+      for (const peerId of peerDependencies) {
         const peer = this.peers.find((p) => p.id === peerId);
         if (!peer) continue;
         const peerBatch = {};
@@ -2619,6 +2955,7 @@ ${reconstitutedRules.join("\n\n")}
     registerMarkdownPlugin(googleFontsPlugin);
     registerMarkdownPlugin(dropdownPlugin);
     registerMarkdownPlugin(imagePlugin);
+    registerMarkdownPlugin(mermaidPlugin);
     registerMarkdownPlugin(placeholdersPlugin);
     registerMarkdownPlugin(presetsPlugin);
     registerMarkdownPlugin(sliderPlugin);
diff --git a/docs/index.md b/docs/index.md
index a7647d5a..faaa28a4 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -27,6 +27,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
 
diff --git a/docs/schema/idoc_v1.d.ts b/docs/schema/idoc_v1.d.ts
index 923210d2..678f70d8 100644
--- a/docs/schema/idoc_v1.d.ts
+++ b/docs/schema/idoc_v1.d.ts
@@ -148,8 +148,31 @@ interface DropdownElementProps extends VariableControl {
  */
 interface ChartElement extends ElementBase {
     type: 'chart';
+    /** key of the chart spec in the page.resources.charts */
     chartKey: string;
 }
+/**
+ * Mermaid
+ * use for rendering Mermaid diagrams, either static or dynamic
+ */
+interface MermaidElement extends MermaidElementProps {
+    type: 'mermaid';
+}
+interface MermaidTemplate {
+    header: string;
+    lineTemplates: {
+        [lineTemplate: string]: string;
+    };
+    dataSourceName?: string;
+}
+interface MermaidElementProps extends ElementBase {
+    /** Static option: the raw Mermaid diagram text */
+    diagramText?: string;
+    /** Dynamic option: data-driven template */
+    template?: MermaidTemplate;
+    /** Dynamic option: input from signal bus, or output to signal bus from rendered data-driven template */
+    variableId?: string;
+}
 /**
  * Image element
  * use for displaying images or server-generated visualizations
@@ -197,7 +220,7 @@ interface TableElementProps extends VariableControl {
 /**
  * Union type for all possible interactive elements
  */
-type InteractiveElement = ChartElement | CheckboxElement | DropdownElement | ImageElement | PresetsElement | SliderElement | TableElement | TextboxElement;
+type InteractiveElement = ChartElement | CheckboxElement | DropdownElement | ImageElement | MermaidElement | PresetsElement | SliderElement | TableElement | TextboxElement;
 interface ElementGroup {
     groupId: string;
     elements: PageElement[];
@@ -257,4 +280,4 @@ interface GoogleFontsSpec {
 type InteractiveDocumentWithSchema = InteractiveDocument & {
     $schema?: string;
 };
-export type { Calculation, ChartElement, CheckboxElement, CheckboxProps, DataLoader, DataLoaderBySpec, DataSource, DataSourceBase, DataSourceBaseFormat, DataSourceByDynamicURL, DataSourceByFile, DataSourceInline, DropdownElement, DropdownElementProps, DynamicDropdownOptions, ElementBase, ElementGroup, GoogleFontsSpec, ImageElement, ImageElementProps, InteractiveDocument, InteractiveDocumentWithSchema, InteractiveElement, MarkdownElement, PageElement, PageStyle, Preset, PresetsElement, PresetsElementProps, ReturnType, SliderElement, SliderElementProps, TableElement, TableElementProps, TemplatedUrl, TextboxElement, TextboxElementProps, Variable, VariableControl, VariableID, VariableType, VariableValue, VariableValueArray, VariableValuePrimitive, Vega_or_VegaLite_spec };
\ No newline at end of file
+export type { Calculation, ChartElement, CheckboxElement, CheckboxProps, DataLoader, DataLoaderBySpec, DataSource, DataSourceBase, DataSourceBaseFormat, DataSourceByDynamicURL, DataSourceByFile, DataSourceInline, DropdownElement, DropdownElementProps, DynamicDropdownOptions, ElementBase, ElementGroup, GoogleFontsSpec, ImageElement, ImageElementProps, InteractiveDocument, InteractiveDocumentWithSchema, InteractiveElement, MarkdownElement, MermaidElement, MermaidElementProps, MermaidTemplate, PageElement, PageStyle, Preset, PresetsElement, PresetsElementProps, ReturnType, SliderElement, SliderElementProps, TableElement, TableElementProps, TemplatedUrl, TextboxElement, TextboxElementProps, Variable, VariableControl, VariableID, VariableType, VariableValue, VariableValueArray, VariableValuePrimitive, Vega_or_VegaLite_spec };
\ No newline at end of file
diff --git a/docs/schema/idoc_v1.json b/docs/schema/idoc_v1.json
index 60d75389..7d23e2c5 100644
--- a/docs/schema/idoc_v1.json
+++ b/docs/schema/idoc_v1.json
@@ -213,6 +213,7 @@
       "description": "Chart use for visualizations",
       "properties": {
         "chartKey": {
+          "description": "key of the chart spec in the page.resources.charts",
           "type": "string"
         },
         "type": {
@@ -1777,6 +1778,9 @@
         {
           "$ref": "#/definitions/ImageElement"
         },
+        {
+          "$ref": "#/definitions/MermaidElement"
+        },
         {
           "$ref": "#/definitions/PresetsElement"
         },
@@ -2277,6 +2281,54 @@
       "description": "Use markdown elements to be verbose and descriptive. Do not use as labels for interactive elements. Embed dynamic variables in markdown using double curly braces {{variableId}} as a placeholder for their values.",
       "type": "string"
     },
+    "MermaidElement": {
+      "additionalProperties": false,
+      "description": "Mermaid use for rendering Mermaid diagrams, either static or dynamic",
+      "properties": {
+        "diagramText": {
+          "description": "Static option: the raw Mermaid diagram text",
+          "type": "string"
+        },
+        "template": {
+          "$ref": "#/definitions/MermaidTemplate",
+          "description": "Dynamic option: data-driven template"
+        },
+        "type": {
+          "const": "mermaid",
+          "type": "string"
+        },
+        "variableId": {
+          "description": "Dynamic option: input from signal bus, or output to signal bus from rendered data-driven template",
+          "type": "string"
+        }
+      },
+      "required": [
+        "type"
+      ],
+      "type": "object"
+    },
+    "MermaidTemplate": {
+      "additionalProperties": false,
+      "properties": {
+        "dataSourceName": {
+          "type": "string"
+        },
+        "header": {
+          "type": "string"
+        },
+        "lineTemplates": {
+          "additionalProperties": {
+            "type": "string"
+          },
+          "type": "object"
+        }
+      },
+      "required": [
+        "header",
+        "lineTemplates"
+      ],
+      "type": "object"
+    },
     "NestTransform": {
       "additionalProperties": false,
       "properties": {
diff --git a/package-lock.json b/package-lock.json
index 4b8fd3f6..8f951483 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
         "esbuild": "^0.25.3",
         "eslint": "^9.25.1",
         "glob": "^11.0.2",
+        "mermaid": "^11.10.0",
         "mocha": "^11.1.0",
         "npm-run-all": "^4.1.5",
         "rimraf": "^6.0.1",
@@ -62,6 +63,30 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@antfu/utils": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
+      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@azu/format-text": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@azu/format-text/-/format-text-1.0.2.tgz",
@@ -559,6 +584,57 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.1.tgz",
+      "integrity": "sha512-i1L7noDNxtFyL5DmZafWy1wRVhGehQmzZaz1HiN5e7iylJMSZR7ekOV7NsIqa5qBldlLrsKv4HbgFUVlQrz8Mw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@chevrotain/cst-dts-gen": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.0.3.tgz",
+      "integrity": "sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/gast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-11.0.3.tgz",
+      "integrity": "sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/types": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/@chevrotain/regexp-to-ast": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-11.0.3.tgz",
+      "integrity": "sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/types": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.0.3.tgz",
+      "integrity": "sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/@chevrotain/utils": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-11.0.3.tgz",
+      "integrity": "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
@@ -2885,6 +2961,43 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
+      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.0.0",
+        "@antfu/utils": "^8.1.0",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.4.0",
+        "globals": "^15.14.0",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^1.0.0",
+        "mlly": "^1.7.4"
+      }
+    },
+    "node_modules/@iconify/utils/node_modules/globals": {
+      "version": "15.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.15.0.tgz",
+      "integrity": "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@isaacs/balanced-match": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
@@ -3055,6 +3168,16 @@
         }
       }
     },
+    "node_modules/@mermaid-js/parser": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-0.6.2.tgz",
+      "integrity": "sha512-+PO02uGF6L6Cs0Bw8RpGhikVvMWEysfAyl27qTlroUB8jSWr1lL0Sf6zi78ZxlSnmgSY2AMMKVgghnN9jTtwkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "langium": "3.3.1"
+      }
+    },
     "node_modules/@microsoft/chartifact-compiler": {
       "resolved": "packages/compiler",
       "link": true
@@ -3083,6 +3206,14 @@
       "resolved": "packages/schema-folder",
       "link": true
     },
+    "node_modules/@microsoft/web-deploy": {
+      "resolved": "packages/web-deploy",
+      "link": true
+    },
+    "node_modules/@microsoft/web-frontend": {
+      "resolved": "packages/web-frontend",
+      "link": true
+    },
     "node_modules/@msrvida/chart-types": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@msrvida/chart-types/-/chart-types-1.1.1.tgz",
@@ -3972,6 +4103,290 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -4083,6 +4498,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@types/vscode": {
       "version": "1.102.0",
       "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.102.0.tgz",
@@ -5397,6 +5820,34 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/chevrotain": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-11.0.3.tgz",
+      "integrity": "sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@chevrotain/cst-dts-gen": "11.0.3",
+        "@chevrotain/gast": "11.0.3",
+        "@chevrotain/regexp-to-ast": "11.0.3",
+        "@chevrotain/types": "11.0.3",
+        "@chevrotain/utils": "11.0.3",
+        "lodash-es": "4.17.21"
+      }
+    },
+    "node_modules/chevrotain-allstar": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.3.1.tgz",
+      "integrity": "sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash-es": "^4.17.21"
+      },
+      "peerDependencies": {
+        "chevrotain": "^11.0.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -5596,6 +6047,13 @@
         "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
       }
     },
+    "node_modules/confbox": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz",
+      "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -5647,6 +6105,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5712,6 +6180,101 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/cytoscape": {
+      "version": "3.33.1",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.33.1.tgz",
+      "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -5724,6 +6287,46 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -5733,6 +6336,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-delaunay": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
@@ -5754,6 +6370,20 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-dsv": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
@@ -5788,6 +6418,29 @@
         "node": ">= 10"
       }
     },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-force": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
@@ -5883,6 +6536,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-quadtree": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
@@ -5892,6 +6555,61 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -5921,6 +6639,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -5966,6 +6694,54 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.11.tgz",
+      "integrity": "sha512-tvlJLyQf834SylNKax8Wkzco/1ias1OPw8DcUMDE7oUIoSEW25riQVuiu/0OWEFqT0cxHT3Pa9/D82Jr47IONw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "lodash-es": "^4.17.21"
+      }
+    },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -6029,6 +6805,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -6313,6 +7096,16 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+      "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+      "dev": true,
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/domutils": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
@@ -6962,6 +7755,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/exsolve": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
+      "integrity": "sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7604,6 +8404,13 @@
         "gunzip-maybe": "bin.js"
       }
     },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -8714,6 +9521,33 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.22",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.22.tgz",
+      "integrity": "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==",
+      "dev": true,
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keyborg": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/keyborg/-/keyborg-2.6.0.tgz",
@@ -8756,6 +9590,12 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==",
+      "dev": true
+    },
     "node_modules/koa": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/koa/-/koa-3.0.1.tgz",
@@ -8893,6 +9733,44 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/kolorist": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
+      "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/langium": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/langium/-/langium-3.3.1.tgz",
+      "integrity": "sha512-QJv/h939gDpvT+9SiLVlY7tZC3xB2qK57v0J04Sh9wpMb6MP1q8gB21L3WIo8T5P1MSMg3Ep14L7KkDCFG3y4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chevrotain": "~11.0.3",
+        "chevrotain-allstar": "~0.3.0",
+        "vscode-languageserver": "~9.0.1",
+        "vscode-languageserver-textdocument": "~1.0.11",
+        "vscode-uri": "~3.0.8"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/langium/node_modules/vscode-uri": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
+      "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -8942,6 +9820,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/local-pkg": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
+      "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mlly": "^1.7.4",
+        "pkg-types": "^2.3.0",
+        "quansync": "^0.2.11"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -8965,6 +9861,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -9094,6 +9997,19 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/marked": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.2.0.tgz",
+      "integrity": "sha512-LbbTuye+0dWRz2TS9KJ7wsnD4KAtpj0MVkWc90XvBa6AslXsT0hTBVH5k32pcSyHH1fst9XEFJunXHktVy0zlg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -9146,6 +10062,49 @@
         "node": ">= 8"
       }
     },
+    "node_modules/mermaid": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.10.0.tgz",
+      "integrity": "sha512-oQsFzPBy9xlpnGxUqLbVY8pvknLlsNIJ0NWwi8SUJjhbP1IT0E0o1lfhU4iYV3ubpy+xkzkaOyDUQMn06vQElQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@braintree/sanitize-url": "^7.0.4",
+        "@iconify/utils": "^2.1.33",
+        "@mermaid-js/parser": "^0.6.2",
+        "@types/d3": "^7.4.3",
+        "cytoscape": "^3.29.3",
+        "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.11",
+        "dayjs": "^1.11.13",
+        "dompurify": "^3.2.5",
+        "katex": "^0.16.22",
+        "khroma": "^2.1.0",
+        "lodash-es": "^4.17.21",
+        "marked": "^16.0.0",
+        "roughjs": "^4.6.6",
+        "stylis": "^4.3.6",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^11.1.0"
+      }
+    },
+    "node_modules/mermaid/node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -9267,6 +10226,38 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/mlly": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
+      "integrity": "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "pathe": "^2.0.1",
+        "pkg-types": "^1.3.0",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/confbox": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mlly/node_modules/pkg-types": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.3.1.tgz",
+      "integrity": "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.4",
+        "pathe": "^2.0.1"
+      }
+    },
     "node_modules/mocha": {
       "version": "11.7.1",
       "resolved": "https://registry.npmjs.org/mocha/-/mocha-11.7.1.tgz",
@@ -10014,6 +11005,13 @@
       "dev": true,
       "license": "BlueOak-1.0.0"
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.3.0.tgz",
+      "integrity": "sha512-ZsEbbZORsyHuO00lY1kV3/t72yp6Ysay6Pd17ZAlNGuGwmWDLCJxFpRs0IzfXfj1o4icJOkUEioexFHzyPurSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pako": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
@@ -10131,6 +11129,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-data-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+      "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -10215,6 +11220,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/peek-stream": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/peek-stream/-/peek-stream-1.1.3.tgz",
@@ -10277,6 +11289,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
+      "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "confbox": "^0.2.2",
+        "exsolve": "^1.0.7",
+        "pathe": "^2.0.3"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.54.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
@@ -10319,6 +11343,24 @@
         "node": ">=4"
       }
     },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -10538,6 +11580,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/quansync": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
+      "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/antfu"
+        },
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/sxzz"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11000,6 +12059,19 @@
         "typescript": "^4.5 || ^5.0"
       }
     },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
     "node_modules/rtl-css-js": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
@@ -12192,6 +13264,13 @@
         "xtend": "~4.0.1"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.1.tgz",
+      "integrity": "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
@@ -12289,6 +13368,16 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/ts-json-schema-generator": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/ts-json-schema-generator/-/ts-json-schema-generator-2.4.0.tgz",
@@ -12503,6 +13592,13 @@
       "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "license": "MIT"
     },
+    "node_modules/ufo": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",
+      "integrity": "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -13279,6 +14375,54 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/vscode-jsonrpc": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
+      "integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/vscode-languageserver": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
+      "integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vscode-languageserver-protocol": "3.17.5"
+      },
+      "bin": {
+        "installServerIntoExtension": "bin/installServerIntoExtension"
+      }
+    },
+    "node_modules/vscode-languageserver-protocol": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
+      "integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vscode-jsonrpc": "8.2.0",
+        "vscode-languageserver-types": "3.17.5"
+      }
+    },
+    "node_modules/vscode-languageserver-textdocument": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
+      "integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vscode-languageserver-types": {
+      "version": "3.17.5",
+      "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
+      "integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vscode-resources": {
       "resolved": "packages/vscode-resources",
       "link": true
@@ -13290,14 +14434,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/web-deploy": {
-      "resolved": "packages/web-deploy",
-      "link": true
-    },
-    "node_modules/web-frontend": {
-      "resolved": "packages/web-frontend",
-      "link": true
-    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
@@ -13835,10 +14971,12 @@
       "license": "MIT"
     },
     "packages/web-deploy": {
+      "name": "@microsoft/web-deploy",
       "version": "1.0.0",
       "license": "MIT"
     },
     "packages/web-frontend": {
+      "name": "@microsoft/web-frontend",
       "version": "1.0.0",
       "license": "MIT"
     }
diff --git a/package.json b/package.json
index fc03fb69..c4b03ebd 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "esbuild": "^0.25.3",
     "eslint": "^9.25.1",
     "glob": "^11.0.2",
+    "mermaid": "^11.10.0",
     "mocha": "^11.1.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
diff --git a/packages/compiler/src/md.ts b/packages/compiler/src/md.ts
index 65e3575d..db42e9a9 100644
--- a/packages/compiler/src/md.ts
+++ b/packages/compiler/src/md.ts
@@ -33,7 +33,16 @@ ${content}
 :::`;
 }
 
-export function targetMarkdown(page: InteractiveDocument) {
+export interface TargetMarkdownOptions {
+    extraNewlineCount?: number;
+}
+
+const defaultOptions: TargetMarkdownOptions = {
+    extraNewlineCount: 1,
+};
+
+export function targetMarkdown(page: InteractiveDocument, options?: TargetMarkdownOptions) {
+    const finalOptions = { ...defaultOptions, ...options };
     const mdSections: string[] = [];
     const dataLoaders = page.dataLoaders || [];
     const variables = page.variables || [];
@@ -109,7 +118,9 @@ export function targetMarkdown(page: InteractiveDocument) {
         }
     }
 
-    const markdown = mdSections.join('\n\n');
+    const newLines = '\n'.repeat(1 + finalOptions.extraNewlineCount);
+
+    const markdown = mdSections.join(newLines);
     return markdown;
 }
 
@@ -139,7 +150,7 @@ function dataLoaderMarkdown(dataSources: DataSource[], variables: Variable[], ta
     return vegaScope;
 }
 
-type pluginSpecs = Plugins.CheckboxSpec | Plugins.DropdownSpec | Plugins.ImageSpec | Plugins.PresetsSpec | Plugins.SliderSpec | Plugins.TabulatorSpec | Plugins.TextboxSpec;
+type pluginSpecs = Plugins.CheckboxSpec | Plugins.DropdownSpec | Plugins.ImageSpec | Plugins.MermaidSpec | Plugins.PresetsSpec | Plugins.SliderSpec | Plugins.TabulatorSpec | Plugins.TextboxSpec;
 
 function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: VegaScope, resources: { charts?: { [chartKey: string]: VegaSpec | VegaLiteSpec } }) {
     const mdElements: string[] = [];
@@ -210,6 +221,30 @@ function groupMarkdown(group: ElementGroup, variables: Variable[], vegaScope: Ve
                     addSpec('image', imageSpec);
                     break;
                 }
+                case 'mermaid': {
+                    const { diagramText, template, variableId } = element;
+                    if (diagramText) {
+                        //static Mermaid text
+                        mdElements.push(tickWrap('mermaid', diagramText));
+                    } else if (template) {
+                        //dynamic Mermaid template
+                        const mermaidSpec: Plugins.MermaidSpec = {
+                            template,
+                        };
+                        //optional output to signal bus
+                        if (variableId) {
+                            mermaidSpec.variableId = variableId;
+                        }
+                        addSpec('mermaid', mermaidSpec);
+                    } else if (variableId) {
+                        //input from signal bus
+                        const mermaidSpec: Plugins.MermaidSpec = {
+                            variableId,
+                        };
+                        addSpec('mermaid', mermaidSpec, false);
+                    }
+                    break;
+                }
                 case 'presets': {
                     const { presets } = element;
                     const presetsSpec: Plugins.PresetsSpec = presets;
diff --git a/packages/examples/json/features/9.mermaid.idoc.json b/packages/examples/json/features/9.mermaid.idoc.json
new file mode 100644
index 00000000..5cf46169
--- /dev/null
+++ b/packages/examples/json/features/9.mermaid.idoc.json
@@ -0,0 +1,277 @@
+{
+    "$schema": "../../../../docs/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."
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/examples/json/mermaid-org chart.idoc.json b/packages/examples/json/mermaid-org chart.idoc.json
new file mode 100644
index 00000000..9de990b6
--- /dev/null
+++ b/packages/examples/json/mermaid-org chart.idoc.json	
@@ -0,0 +1,198 @@
+{
+    "$schema": "../../../docs/schema/idoc_v1.json",
+    "title": "Org Chart Example (Mermaid)",
+    "dataLoaders": [
+        {
+            "dataSourceName": "orgChartData",
+            "type": "inline",
+            "format": "json",
+            "content": [
+                {
+                    "lineTemplate": "person",
+                    "id": "CEO",
+                    "label": "CEO<br/>Alice Smith"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "CTO",
+                    "label": "CTO<br/>Bob Lee"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "CFO",
+                    "label": "CFO<br/>Carol Jones"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "COO",
+                    "label": "COO<br/>David Kim"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "ENG1",
+                    "label": "Lead Engineer<br/>Eve Tran"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "ENG2",
+                    "label": "Engineer<br/>Frank Wu"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "ENG3",
+                    "label": "Engineer<br/>Grace Lin"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "ACC1",
+                    "label": "Accountant<br/>Henry Patel"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "ACC2",
+                    "label": "Accountant<br/>Ivy Chen"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "OPS1",
+                    "label": "Operations Mgr<br/>Jack Brown"
+                },
+                {
+                    "lineTemplate": "person",
+                    "id": "OPS2",
+                    "label": "Ops Specialist<br/>Kim Lee"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CEO",
+                    "to": "CTO"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CEO",
+                    "to": "CFO"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CEO",
+                    "to": "COO"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CTO",
+                    "to": "ENG1"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CTO",
+                    "to": "ENG2"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CTO",
+                    "to": "ENG3"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CFO",
+                    "to": "ACC1"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "CFO",
+                    "to": "ACC2"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "COO",
+                    "to": "OPS1"
+                },
+                {
+                    "lineTemplate": "orgEdge",
+                    "from": "COO",
+                    "to": "OPS2"
+                }
+            ]
+        }
+    ],
+    "variables": [
+        {
+            "variableId": "direction",
+            "type": "string",
+            "initialValue": "TD"
+        },
+        {
+            "variableId": "orgChartOutput",
+            "type": "string",
+            "initialValue": ""
+        }
+    ],
+    "groups": [
+        {
+            "groupId": "main",
+            "elements": [
+                "# Mermaid Plugin Example - Org Chart",
+                "Template-based org chart generation:",
+                {
+                    "type": "mermaid",
+                    "template": {
+                        "dataSourceName": "orgChartDataTable",
+                        "header": "graph {{direction}}",
+                        "lineTemplates": {
+                            "person": "{{id}}[{{label}}]",
+                            "orgEdge": "{{from}} --> {{to}}"
+                        }
+                    },
+                    "variableId": "orgChartOutput"
+                },
+                {
+                    "type": "dropdown",
+                    "variableId": "direction",
+                    "options": [
+                        "TD",
+                        "LR"
+                    ]
+                },
+                "## JSON Data",
+                "Load data from a static JSON array.",
+                {
+                    "type": "table",
+                    "dataSourceName": "orgChartData",
+                    "variableId": "orgChartDataTable",
+                    "editable": true,
+                    "tabulatorOptions": {
+                        "columns": [
+                            {
+                                "title": "LineTemplate",
+                                "field": "lineTemplate",
+                                "editor": "input"
+                            },
+                            {
+                                "title": "ID",
+                                "field": "id",
+                                "editor": "input"
+                            },
+                            {
+                                "title": "Label",
+                                "field": "label",
+                                "editor": "input"
+                            },
+                            {
+                                "title": "From",
+                                "field": "from",
+                                "editor": "input"
+                            },
+                            {
+                                "title": "To",
+                                "field": "to",
+                                "editor": "input"
+                            }
+                        ],
+                        "layout": "fitColumns",
+                        "maxHeight": "300px"
+                    }
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/packages/host/src/listener.ts b/packages/host/src/listener.ts
index 8722bf3e..5459a04e 100644
--- a/packages/host/src/listener.ts
+++ b/packages/host/src/listener.ts
@@ -165,7 +165,7 @@ export class Listener {
     //try to show the message in the sandbox, since it works well with paging folder content
     if (this.sandboxReady) {
       const markdown = `# Error:\n${message}\n\n${details}`;
-      this.render('Error', markdown, undefined, true);
+      this.renderMarkdown(markdown);
     } else {
       // Clear previous content
       this.previewDiv.innerHTML = '';
diff --git a/packages/markdown/chartifact-reset.css b/packages/markdown/chartifact-reset.css
index bdc6be51..7ab6f4d7 100644
--- a/packages/markdown/chartifact-reset.css
+++ b/packages/markdown/chartifact-reset.css
@@ -61,3 +61,7 @@ ul img {
 .chartifact-plugin-vega form>:first-child {
     margin-top: 4px;
 }
+
+.chartifact-plugin-mermaid {
+    text-align: center;
+}
diff --git a/packages/markdown/index.html b/packages/markdown/index.html
index 14dc6478..0b67fc1b 100644
--- a/packages/markdown/index.html
+++ b/packages/markdown/index.html
@@ -272,6 +272,8 @@
         const textarea = document.getElementById('markdown-input');
         const renderer = new Renderer(document.getElementById('content'));
 
+        window.renderer = renderer;
+
         function render() {
             //renderer.render(textarea.value);
             
diff --git a/packages/markdown/src/factory.ts b/packages/markdown/src/factory.ts
index c9ca1271..58a260c2 100644
--- a/packages/markdown/src/factory.ts
+++ b/packages/markdown/src/factory.ts
@@ -9,6 +9,7 @@ import { container, MarkdownItContainerOptions } from '@mdit/plugin-container';
 import { ErrorHandler, Renderer } from './renderer.js';
 import { defaultCommonOptions, SpecReview } from 'common';
 import { PluginNames } from './plugins/interfaces.js';
+import { decorateFenceWithPlaceholders } from './plugins/placeholders.js';
 
 declare const markdownit: typeof MarkdownIt;
 
@@ -134,7 +135,15 @@ export function create() {
 
         // Fallback to the original fence renderer if no plugin matches
         if (originalFence) {
-            return originalFence(tokens, idx, options, env, slf);
+            const originalResult = originalFence(tokens, idx, options, env, slf);
+            
+            // Check if the content has placeholders and let placeholders plugin handle it
+            if (token.content && token.content.includes('{{')) {
+                // Find the placeholders plugin and see if it can handle this
+                return decorateFenceWithPlaceholders([token], 0);
+            }
+            
+            return originalResult;
         } else {
             return '';
         }
diff --git a/packages/markdown/src/plugins/index.ts b/packages/markdown/src/plugins/index.ts
index b3cbb714..0ab5ae84 100644
--- a/packages/markdown/src/plugins/index.ts
+++ b/packages/markdown/src/plugins/index.ts
@@ -11,6 +11,7 @@ import { cssPlugin } from './css.js';
 import { googleFontsPlugin } from './google-fonts.js';
 import { dropdownPlugin } from './dropdown.js';
 import { imagePlugin } from './image.js';
+import { mermaidPlugin } from './mermaid.js';
 import { placeholdersPlugin } from './placeholders.js';
 import { presetsPlugin } from './presets.js';
 import { sliderPlugin } from './slider.js';
@@ -26,6 +27,7 @@ export function registerNativePlugins() {
     registerMarkdownPlugin(googleFontsPlugin);
     registerMarkdownPlugin(dropdownPlugin);
     registerMarkdownPlugin(imagePlugin);
+    registerMarkdownPlugin(mermaidPlugin);
     registerMarkdownPlugin(placeholdersPlugin);
     registerMarkdownPlugin(presetsPlugin);
     registerMarkdownPlugin(sliderPlugin);
diff --git a/packages/markdown/src/plugins/interfaces.ts b/packages/markdown/src/plugins/interfaces.ts
index 8f34e9ec..5314d3a9 100644
--- a/packages/markdown/src/plugins/interfaces.ts
+++ b/packages/markdown/src/plugins/interfaces.ts
@@ -5,6 +5,7 @@
 export { CheckboxSpec } from './checkbox.js';
 export { DropdownSpec } from './dropdown.js';
 export { ImageSpec } from './image.js';
+export { MermaidSpec } from './mermaid.js';
 export { PresetsSpec } from './presets.js';
 export { SliderSpec } from './slider.js';
 export { TabulatorSpec } from './tabulator.js';
@@ -17,6 +18,7 @@ export type PluginNames =
     'dropdown' |
     'image' |
     'google-fonts' |
+    'mermaid' |
     'placeholders' |
     'presets' |
     'slider' |
diff --git a/packages/markdown/src/plugins/mermaid.ts b/packages/markdown/src/plugins/mermaid.ts
new file mode 100644
index 00000000..61b28f59
--- /dev/null
+++ b/packages/markdown/src/plugins/mermaid.ts
@@ -0,0 +1,408 @@
+/**
+* Copyright (c) Microsoft Corporation.
+* Licensed under the MIT License.
+*/
+
+/*
+* Mermaid Plugin - Renders Mermaid diagrams with flexible input modes
+*
+* USAGE EXAMPLES:
+*
+* 1. Raw Mermaid Text (simplest):
+* ```mermaid
+* flowchart TD
+*     A[Start] --> B[Process]
+*     B --> C[End]
+* ```
+*
+* 2. String Input via Signal (textbox → diagram):
+* ```mermaid
+* {
+*   "variableId": "userInput"
+* }
+* ```
+* When userInput signal contains complete Mermaid text, renders directly.
+*
+* 3. Template-Driven with Data (structured data → diagram):
+* ```mermaid
+* {
+*   "template": {
+*     "dataSourceName": "diagramData",
+*     "diagramType": "flowchart TD",
+*     "lineTemplates": {
+*       "node": "    {{id}}[{{label}}]",
+*       "link": "    {{from}} --> {{to}}"
+*     }
+*   },
+*   "variableId": "outputDiagram"
+* }
+* ```
+* With data like:
+* [
+*   {"template": "node", "id": "A", "label": "Start"},
+*   {"template": "node", "id": "B", "label": "Process"},
+*   {"template": "link", "from": "A", "to": "B"}
+* ]
+*/
+
+import { Plugin, RawFlaggableSpec, IInstance } from '../factory.js';
+import { ErrorHandler } from '../renderer.js';
+import { sanitizedHTML } from '../sanitize.js';
+import { flaggableJsonPlugin } from './config.js';
+import { pluginClassName } from './util.js';
+import { PluginNames } from './interfaces.js';
+import { TemplateToken, tokenizeTemplate } from 'common';
+import { MermaidConfig } from 'mermaid';
+import type Mermaid from 'mermaid';
+import { MermaidElementProps, MermaidTemplate } from '@microsoft/chartifact-schema';
+
+interface MermaidInstance {
+    id: string;
+    spec: MermaidElementProps;
+    container: Element;
+    lastRenderedDiagram: string;
+    signals: Record<string, any>;
+    tokens: TemplateToken[];
+}
+
+export interface MermaidSpec extends MermaidElementProps { }
+
+const pluginName: PluginNames = 'mermaid';
+const className = pluginClassName(pluginName);
+
+function inspectMermaidSpec(spec: MermaidSpec): RawFlaggableSpec<MermaidSpec> {
+    const reasons: string[] = [];
+    let hasFlags = false;
+
+    if (spec.diagramText) {
+        // For raw text mode, check for potentially dangerous content
+        const dangerousPatterns = [
+            /javascript:/i,
+            /<script/i,
+            /onclick=/i,
+            /onerror=/i,
+            /onload=/i,
+            /href\s*=\s*["']javascript:/i
+        ];
+
+        for (const pattern of dangerousPatterns) {
+            if (pattern.test(spec.diagramText)) {
+                hasFlags = true;
+                reasons.push('Potentially unsafe content detected in diagram');
+                break;
+            }
+        }
+    } else {
+        // For JSON template mode, validate structure
+        // template is optional - only needed if using template mode
+        if (spec.template && typeof spec.template !== 'object') {
+            hasFlags = true;
+            reasons.push('template must be an object if provided');
+        } else if (spec.template) {
+            // Validate diagram
+            if (!spec.template.header || typeof spec.template.header !== 'string') {
+                hasFlags = true;
+                reasons.push('template.header must be a non-empty string');
+            }
+
+            // Validate lineTemplates
+            if (!spec.template.lineTemplates || typeof spec.template.lineTemplates !== 'object') {
+                hasFlags = true;
+                reasons.push('template.lineTemplates must be an object');
+            } else {
+                // Check templates for dangerous content
+                for (const [lineTemplateName, lineTemplate] of Object.entries(spec.template.lineTemplates)) {
+                    if (typeof lineTemplate !== 'string') {
+                        hasFlags = true;
+                        reasons.push(`Template '${lineTemplateName}' must be a string`);
+                    }
+                }
+            }
+            // Must have dataSourceName for dynamic content
+            if (!spec.template.dataSourceName) {
+                hasFlags = true;
+                reasons.push('Must specify dataSourceName for dynamic content');
+            }
+        }
+    }
+
+    return {
+        spec,
+        hasFlags,
+        reasons,
+    };
+}
+
+declare const mermaid: typeof Mermaid;
+
+async function initializeMermaid() {
+    mermaid.initialize({
+        startOnLoad: false,
+        securityLevel: 'strict',
+    } as MermaidConfig);
+}
+
+//initialize it now if it was loaded via script tag
+if (typeof mermaid !== 'undefined') {
+    initializeMermaid();
+}
+
+// Helper to lazy load Mermaid from CDN and initialize it
+let mermaidLoadPromise: Promise<void> | null = null;
+function loadMermaidFromCDN(): Promise<void> {
+    if (mermaidLoadPromise) return mermaidLoadPromise;
+    mermaidLoadPromise = new Promise<void>((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/mermaid@11.10.0/dist/mermaid.min.js';
+        script.async = true;
+        script.onload = () => {
+            initializeMermaid();
+            resolve();
+        };
+        script.onerror = () => reject(new Error('Failed to load Mermaid from CDN'));
+        document.head.appendChild(script);
+    });
+    return mermaidLoadPromise;
+}
+
+export const mermaidPlugin: Plugin<MermaidSpec> = {
+    ...flaggableJsonPlugin<MermaidSpec>(pluginName, className),
+    fence: (token, index) => {
+        const content = token.content.trim();
+        let spec: MermaidSpec;
+        let flaggableSpec: RawFlaggableSpec<MermaidSpec>;
+
+        // Try to parse as JSON first
+        try {
+            const parsed = JSON.parse(content) as MermaidSpec;
+            if (parsed && typeof parsed === 'object') {
+                spec = parsed;
+            } else {
+                // If it's JSON but not a valid MermaidSpec, treat as raw text
+                spec = { diagramText: content };
+            }
+        } catch (e) {
+            // If JSON parsing fails, treat as raw text
+            spec = { diagramText: content };
+        }
+
+        flaggableSpec = inspectMermaidSpec(spec);
+        const json = JSON.stringify(flaggableSpec);
+
+        return sanitizedHTML('div', { class: className, id: `${pluginName}-${index}` }, json, true);
+    },
+    hydrateComponent: async (renderer, errorHandler, specs) => {
+        const { signalBus } = renderer;
+        const mermaidInstances: MermaidInstance[] = [];
+
+        for (let index = 0; index < specs.length; index++) {
+            const specReview = specs[index];
+            if (!specReview.approvedSpec) {
+                continue;
+            }
+            const container = renderer.element.querySelector(`#${specReview.containerId}`);
+            if (!container) {
+                continue;
+            }
+
+            const spec = specReview.approvedSpec;
+            const { template } = spec;
+
+            // Create container for the diagram
+            container.innerHTML = `<div class="mermaid-loading">Loading diagram...</div>`;
+
+            const tokens = tokenizeTemplate(template?.header || '') || [];
+
+            const mermaidInstance: MermaidInstance = {
+                id: `${pluginName}-${index}`,
+                spec,
+                container,
+                signals: {},
+                tokens,
+                lastRenderedDiagram: null,
+            };
+            mermaidInstances.push(mermaidInstance);
+
+            // For raw text mode, render immediately
+            if (spec.diagramText && typeof spec.diagramText === 'string') {
+                await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, spec.diagramText, errorHandler, pluginName, index);
+            }
+        }
+
+        const instances = mermaidInstances.map((mermaidInstance, index): IInstance => {
+            const { spec, signals, tokens } = mermaidInstance;
+            const { template, variableId } = spec;
+
+            const initialSignals = tokens.filter(token => token.type === 'variable').map(token => ({
+                name: token.name,
+                value: null,
+                priority: -1,
+                isData: false,
+            }));
+
+            if (template?.dataSourceName) {
+                initialSignals.push({
+                    name: template.dataSourceName,
+                    value: null,
+                    priority: -1,
+                    isData: true,
+                });
+            }
+
+            // Add input/output signal for generated Mermaid text (data-driven mode only)
+            if (variableId) {
+                initialSignals.push({
+                    name: variableId,
+                    value: '',
+                    priority: 1,
+                    isData: false,
+                });
+            }
+
+            return {
+                ...mermaidInstance,
+                initialSignals,
+                receiveBatch: async (batch) => {
+
+                    if (template) {
+
+                        //merge incoming signals with cached signals
+                        for (const [signalName, batchItem] of Object.entries(batch)) {
+                            signals[signalName] = batchItem.value;
+                        }
+
+                        if (Array.isArray(signals[template.dataSourceName])) {
+
+                            // Generate diagram text from template and data
+                            const diagramText = dataToDiagram(template, signals[template.dataSourceName] as object[], tokens, signals);
+
+                            if (diagramText && mermaidInstance.lastRenderedDiagram !== diagramText) {
+                                // Broadcast the generated Mermaid text if variableId is specified
+                                if (spec.variableId) {
+                                    signalBus.broadcast(mermaidInstance.id, {
+                                        [spec.variableId]: {
+                                            value: diagramText,
+                                            isData: false,
+                                        }
+                                    });
+                                }
+                            }
+
+                            if (diagramText && mermaidInstance.lastRenderedDiagram !== diagramText) {
+                                await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, diagramText, errorHandler, pluginName, index);
+                                mermaidInstance.lastRenderedDiagram = diagramText;
+                            }
+                        } else {
+                            mermaidInstance.container.innerHTML = '<div class="error">No data available to render diagram</div>';
+                        }
+
+                    } else if (variableId && batch[variableId]) {
+                        const value = batch[variableId].value;
+
+                        if (typeof value === 'string' && value.trim().length > 0) {
+                            // Render raw Mermaid text from variable
+                            await renderRawDiagram(mermaidInstance.id, mermaidInstance.container, value, errorHandler, pluginName, index);
+                            mermaidInstance.lastRenderedDiagram = value;
+                        } else {
+                            // Clear container if variable is empty
+                            mermaidInstance.container.innerHTML = '<div class="error">No diagram to display</div>';
+                        }
+
+                    }
+                }
+
+            };
+        });
+
+        return instances;
+    },
+};
+
+function isValidMermaid(diagramText: string) {
+    // string must contain at least one carriage return and text after the first carriage return
+    const lines = diagramText.split('\n');
+    return lines.length > 1 && lines[1].trim().length > 0;
+}
+
+async function renderRawDiagram(id: string, container: Element, diagramText: string, errorHandler: ErrorHandler, pluginName: string, index: number) {
+    if (typeof mermaid === 'undefined') {
+        await loadMermaidFromCDN();
+    }
+
+    if (typeof mermaid === 'undefined') {
+        container.innerHTML = '<div class="error">Mermaid library not loaded dynamically</div>';
+        return;
+    }
+
+    if (!isValidMermaid(diagramText)) {
+        container.innerHTML = '<div class="error">Invalid Mermaid diagram format</div>';
+        return;
+    }
+
+    try {
+        const { svg } = await mermaid.render(id, diagramText);
+        container.innerHTML = svg;
+    } catch (error) {
+        container.innerHTML = `<div class="error">Failed to render diagram ${id} <pre>${diagramText}</pre></div>`;
+        errorHandler(error instanceof Error ? error : new Error(String(error)), pluginName, index, 'render', container);
+        // Clean up temporary dmermaid-* divs by id
+        document.querySelectorAll('div[id^="dmermaid-"]').forEach(el => el.remove());
+    }
+}
+
+function dataToDiagram(template: MermaidTemplate, data: object[], tokens: TemplateToken[], signals: Record<string, string>) {
+    const lines: string[] = [];
+
+    const parts: string[] = [];
+    tokens.forEach(token => {
+        if (token.type === 'literal') {
+            parts.push(token.value);
+        } else if (token.type === 'variable') {
+            const signalValue = signals[token.name];
+            if (signalValue !== undefined) {
+                parts.push(encodeURIComponent(signalValue));
+            } else {
+                //leave variable slot empty
+            }
+        }
+    });
+    const header = parts.join('');
+
+    // Add diagram header from template
+    lines.push(header);
+
+    for (const item of data) {
+        const lineTemplateName = item['lineTemplate'];
+        const lineTemplate = template?.lineTemplates?.[lineTemplateName];
+
+        if (!lineTemplate) {
+            console.warn(`Template '${lineTemplateName}' not found in lineTemplates`);
+            continue;
+        }
+
+        // Use tokenizeTemplate to parse placeholders
+        const tokens = tokenizeTemplate(lineTemplate);
+
+        // Replace variables with actual values
+        let line = '';
+        for (const token of tokens) {
+            if (token.type === 'literal') {
+                line += token.value;
+            } else if (token.type === 'variable') {
+                const value = item[token.name];
+
+                //TODO: get signal values outside of the row from signal bus
+
+                if (value !== undefined) {
+                    line += String(value);
+                }
+                // If value is undefined, we leave the placeholder empty (could also leave the original {{var}} if preferred)
+            }
+        }
+
+        lines.push(line);
+    }
+
+    const diagramText = lines.join('\n');
+    return diagramText;
+}
diff --git a/packages/markdown/src/plugins/placeholders.ts b/packages/markdown/src/plugins/placeholders.ts
index 0a251e37..04180e53 100644
--- a/packages/markdown/src/plugins/placeholders.ts
+++ b/packages/markdown/src/plugins/placeholders.ts
@@ -10,8 +10,9 @@ import { DynamicUrl } from './url.js';
 import { createImageContainerTemplate, createImageLoadingLogic } from './image.js';
 import { pluginClassName } from './util.js';
 import { sanitizeHtmlComment } from '../sanitize.js';
+import { tokenizeTemplate } from 'common';
 
-function decorateDynamicUrl(tokens: Token[], idx: number, attrName: string, elementType: string) {
+export function decorateDynamicUrl(tokens: Token[], idx: number, attrName: string, elementType: string) {
     const token = tokens[idx];
     const attrValue = token.attrGet(attrName);
     if (attrValue && attrValue.includes('%7B%7B')) {
@@ -27,6 +28,30 @@ function decorateDynamicUrl(tokens: Token[], idx: number, attrName: string, elem
     return token;
 }
 
+export function decorateFenceWithPlaceholders(tokens: Token[], idx: number): string {
+    const token = tokens[idx];
+    const content = token.content;
+    
+    // Check if content has placeholders
+    if (content && content.includes('{{')) {
+        // Use tokenizeTemplate to extract placeholders (like decorateDynamicUrl does)
+        const templateTokens = tokenizeTemplate(content);
+        const variableTokens = templateTokens.filter(t => t.type === 'variable');
+        
+        if (variableTokens.length > 0) {
+            // Store the original template content (like dynamic-url attribute)
+            const templateContent = encodeURIComponent(content);
+            
+            // Create HTML with the template stored in data attribute
+            const placeholderData = variableTokens.map(t => `data-placeholder-${t.name.toLowerCase()}="true"`).join(' ');
+            
+            return `<pre class="has-placeholders" data-template-content="${templateContent}" ${placeholderData}><code></code></pre>`;
+        }
+    }
+    
+    return null;
+}
+
 const pluginName: PluginNames = 'placeholders';
 const imageClassName = pluginClassName(pluginName + '_image');
 
@@ -93,9 +118,11 @@ export const placeholdersPlugin: Plugin = {
 
     hydrateComponent: async (renderer, errorHandler) => {
         const dynamicUrlMap = new WeakMap<Element, DynamicUrl>();
+        const templateHandlerMap = new WeakMap<Element, any>();
         const placeholders = renderer.element.querySelectorAll('.dynamic-placeholder');
         const dynamicUrls = renderer.element.querySelectorAll('[dynamic-url]');
         const dynamicImages = renderer.element.querySelectorAll(`.${imageClassName}`);
+        const codeBlocksWithPlaceholders = renderer.element.querySelectorAll('.has-placeholders[data-template-content]');
 
         const elementsByKeys = new Map<string, Element[]>();
 
@@ -112,6 +139,53 @@ export const placeholdersPlugin: Plugin = {
             }
         }
 
+        // Collect code blocks with placeholders (like dynamic URLs)
+        for (const element of Array.from(codeBlocksWithPlaceholders)) {
+            const templateContent = element.getAttribute('data-template-content');
+            if (!templateContent) {
+                continue;
+            }
+
+            // Create a custom template handler that doesn't URL encode (unlike DynamicUrl)
+            const templateText = decodeURIComponent(templateContent);
+            const tokens = tokenizeTemplate(templateText);
+            const variableTokens = tokens.filter(token => token.type === 'variable');
+            
+            // Create a simple object to track signal values for this template
+            const templateHandler = {
+                signals: {} as Record<string, string>,
+                update: () => {
+                    let content = '';
+                    for (const token of tokens) {
+                        if (token.type === 'literal') {
+                            content += token.value;
+                        } else if (token.type === 'variable') {
+                            content += templateHandler.signals[token.name] || '';
+                        }
+                    }
+                    element.innerHTML = `<code>${content}</code>`;
+                }
+            };
+
+            // Initialize signal values
+            variableTokens.forEach(token => {
+                templateHandler.signals[token.name] = '';
+            });
+
+            // Store the template handler instead of DynamicUrl
+            templateHandlerMap.set(element, templateHandler);
+
+            // Register for signal updates
+            variableTokens.forEach(token => {
+                const key = token.name;
+                if (elementsByKeys.has(key)) {
+                    elementsByKeys.get(key)!.push(element);
+                } else {
+                    elementsByKeys.set(key, [element]);
+                }
+            });
+        }
+
         // Collect dynamic URLs
         for (const element of Array.from(dynamicUrls)) {
             const templateUrl = element.getAttribute('dynamic-url');
@@ -197,6 +271,12 @@ export const placeholdersPlugin: Plugin = {
                                 if (dynamicUrl) {
                                     dynamicUrl.receiveBatch(batch);
                                 }
+                            } else if (element.hasAttribute('data-template-content')) {
+                                const templateHandler = templateHandlerMap.get(element);
+                                if (templateHandler && templateHandler.signals) {
+                                    templateHandler.signals[key] = batch[key].value?.toString() || '';
+                                    templateHandler.update();
+                                }
                             }
                         }
                     }
diff --git a/packages/markdown/src/plugins/tabulator.ts b/packages/markdown/src/plugins/tabulator.ts
index 26cf1719..22f96472 100644
--- a/packages/markdown/src/plugins/tabulator.ts
+++ b/packages/markdown/src/plugins/tabulator.ts
@@ -17,6 +17,7 @@ interface TabulatorInstance {
     table: TabulatorType;
     built: boolean;
     selectableRows: boolean;
+    listening: boolean;
 }
 
 export interface TabulatorSpec extends TableElementProps {
@@ -107,6 +108,7 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                 table,
                 built: false,
                 selectableRows,
+                listening: false,
             };
             table.on('tableBuilt', () => {
                 table.off('tableBuilt');
@@ -130,6 +132,7 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                     isData: true,
                 });
             }
+
             const outputData = () => {
                 let data: object[];
                 if (selectableRows) {
@@ -143,22 +146,23 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                     delete row[deleteFieldname];
                 });
 
-
-                // Use structuredClone to ensure deep copy
-                // vega may efficiently have symbols on data to cache a datum's values
-                // so this needs to appear to be new data
-                const value = structuredClone(data);
-
                 const batch: Batch = {
                     [spec.variableId]: {
-                        value,
+                        value: data,
                         isData: true,
                     },
                 };
                 signalBus.log(tabulatorInstance.id, 'sending batch', batch);
                 signalBus.broadcast(tabulatorInstance.id, batch);
             }
-            const setData = (data: object[]) => {
+
+            const setData = (_data: object[]) => {
+
+                // Use structuredClone to ensure deep copy
+                // vega may efficiently have symbols on data to cache a datum's values
+                // so this needs to appear to be new data
+                const data = structuredClone(_data);
+
                 table.setData(data).then(() => {
 
                     // Get current column definitions
@@ -204,8 +208,9 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                     }
                     table.setColumns(columns);
 
-
-                    outputData();
+                    if (tabulatorInstance.listening) {
+                        outputData();
+                    }
 
                 }).catch((error) => {
                     console.error(`Error setting data for Tabulator ${spec.variableId}:`, error);
@@ -254,6 +259,10 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                     }
                 },
                 beginListening(sharedSignals) {
+                    tabulatorInstance.listening = true;
+                    if (tabulatorInstance.built) {
+                        outputData();
+                    }
                     if (selectableRows) {
                         const hasMatchingSignal = sharedSignals.some(({ isData, signalName }) =>
                             isData && signalName === spec.variableId
@@ -269,6 +278,9 @@ export const tabulatorPlugin: Plugin<TabulatorSpec> = {
                         table.on('cellEdited', (cell) => {
                             outputData();
                         });
+                        table.on('rowMoved', (row) => {
+                            outputData();
+                        });
                     }
                 },
                 getCurrentSignalValue() {
diff --git a/packages/markdown/src/plugins/url.ts b/packages/markdown/src/plugins/url.ts
index 343f05f9..24d4137a 100644
--- a/packages/markdown/src/plugins/url.ts
+++ b/packages/markdown/src/plugins/url.ts
@@ -7,17 +7,6 @@ import { TemplatedUrl } from "@microsoft/chartifact-schema";
 import { TemplateToken, tokenizeTemplate } from "common";
 import { Batch } from "../factory.js";
 
-// export function getUrlSignals(url: TemplatedUrl) {
-//     const signalNames = new Set<string>();
-
-//     //get signal names from tokens in the url
-//     const tokens = tokenizeTemplate(url);
-//     const signalsFromToken = tokens.filter(token => token.type === 'variable').map(token => token.name);
-//     signalsFromToken.forEach(token => signalNames.add(token));
-
-//     return Array.from(signalNames);
-// }
-
 export class DynamicUrl {
     public signals: Record<string, string>;
     public tokens: TemplateToken[];
diff --git a/packages/markdown/src/signalbus.ts b/packages/markdown/src/signalbus.ts
index 31ea94cb..f5649701 100644
--- a/packages/markdown/src/signalbus.ts
+++ b/packages/markdown/src/signalbus.ts
@@ -54,7 +54,15 @@ export class SignalBus {
 
         this.log(originId, 'Broadcasting batch from', originId, batch);
         this.broadcastingStack.push(originId);
-        for (const peerId of this.peerDependencies[originId]) {
+        const peerDependencies = this.peerDependencies[originId];
+
+        if (!peerDependencies || peerDependencies.length === 0) {
+            this.log(originId, 'No peers to broadcast to');
+            this.broadcastingStack.pop();
+            return;
+        }
+
+        for (const peerId of peerDependencies) {
             const peer = this.peers.find(p => p.id === peerId);
             if (!peer) continue;
 
diff --git a/packages/markdown/vite.bundle.config.js b/packages/markdown/vite.bundle.config.js
index 51db9028..da1ec352 100644
--- a/packages/markdown/vite.bundle.config.js
+++ b/packages/markdown/vite.bundle.config.js
@@ -23,7 +23,7 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       // External dependencies that the library expects consumers to provide
-      external: ['markdown-it', 'vega', 'vega-lite', 'tabulator-tables', 'css-tree'],
+      external: ['markdown-it', 'vega', 'vega-lite', 'tabulator-tables', 'css-tree', 'mermaid'],
       output: [
         {
           ...commonOutputConfig,
diff --git a/packages/schema-doc/src/interactive.ts b/packages/schema-doc/src/interactive.ts
index a4d2118d..099f0363 100644
--- a/packages/schema-doc/src/interactive.ts
+++ b/packages/schema-doc/src/interactive.ts
@@ -2,7 +2,7 @@
 * Copyright (c) Microsoft Corporation.
 * Licensed under the MIT License.
 */
-import { DataSourceBase, VariableID, VariableControl, ElementBase, TemplatedUrl } from './common.js';
+import { VariableID, VariableControl, ElementBase, TemplatedUrl } from './common.js';
 
 /**
  * Interactive Elements
@@ -78,10 +78,37 @@ export interface DropdownElementProps extends VariableControl {
 export interface ChartElement extends ElementBase {
   type: 'chart';
 
-  // key of the chart spec in the page.resources.charts
+  /** key of the chart spec in the page.resources.charts */
   chartKey: string;
 }
 
+/**
+ * Mermaid
+ * use for rendering Mermaid diagrams, either static or dynamic
+ */
+
+export interface MermaidElement extends MermaidElementProps {
+  type: 'mermaid';
+}
+
+export interface MermaidTemplate {
+  /* this should at minimum have the diagram type, but it may also be preceded with frontmatter. It may also include templated {{variables}} */
+  header: string;
+  lineTemplates: { [lineTemplate: string]: string };
+  dataSourceName?: string;
+}
+
+export interface MermaidElementProps extends ElementBase {
+  /** Static option: the raw Mermaid diagram text */
+  diagramText?: string;
+
+  /** Dynamic option: data-driven template */
+  template?: MermaidTemplate;
+
+  /** Dynamic option: input from signal bus, or output to signal bus from rendered data-driven template */
+  variableId?: string;
+}
+
 /**
  * Image element
  * use for displaying images or server-generated visualizations
@@ -124,7 +151,7 @@ export interface TableElementProps extends VariableControl {
 
   /** Name of the data source to use for incoming data (output data is available via the variableId of this table element) */
   dataSourceName: string;
-  
+
   editable?: boolean;
 
   /** Tabulator options (must be JSON stringify-able, so no callbacks allowed) */
@@ -181,6 +208,7 @@ export type InteractiveElement =
   | CheckboxElement
   | DropdownElement
   | ImageElement
+  | MermaidElement
   | PresetsElement
   | SliderElement
   | TableElement
diff --git a/packages/vscode/scripts/resources.mjs b/packages/vscode/scripts/resources.mjs
index 30a2075a..10efe4fd 100644
--- a/packages/vscode/scripts/resources.mjs
+++ b/packages/vscode/scripts/resources.mjs
@@ -12,6 +12,7 @@ const resources = [
     '../../node_modules/css-tree/dist/csstree.js',
     '../../node_modules/tabulator-tables/dist/js/tabulator.min.js',
     '../../node_modules/tabulator-tables/dist/css/tabulator.min.css',
+    '../../node_modules/mermaid/dist/mermaid.min.js',
 
     //local umd builds
     '../../packages/markdown/dist/css/chartifact-reset.css',
diff --git a/packages/vscode/src/web/command-edit.ts b/packages/vscode/src/web/command-edit.ts
index 4001def9..0bdad009 100644
--- a/packages/vscode/src/web/command-edit.ts
+++ b/packages/vscode/src/web/command-edit.ts
@@ -74,6 +74,7 @@ export class EditManager {
 							script(getResourceContent('vega.min.js')) +
 							script(getResourceContent('vega-lite.min.js')) +
 							script(getResourceContent('tabulator.min.js')) +
+							script(getResourceContent('mermaid.min.js')) +
 							script(getResourceContent('chartifact.markdown.umd.js'))
 					};
 					this.current.panel.webview.postMessage(setOfflineDependenciesMessage);
diff --git a/packages/vscode/src/web/command-preview.ts b/packages/vscode/src/web/command-preview.ts
index b2817961..0d880e96 100644
--- a/packages/vscode/src/web/command-preview.ts
+++ b/packages/vscode/src/web/command-preview.ts
@@ -99,6 +99,7 @@ export class PreviewManager {
 							script(getResourceContent('vega.min.js')) +
 							script(getResourceContent('vega-lite.min.js')) +
 							script(getResourceContent('tabulator.min.js')) +
+							script(getResourceContent('mermaid.min.js')) +
 							script(getResourceContent('chartifact.markdown.umd.js'))
 					};
 					this.current.panel.webview.postMessage(setOfflineDependenciesMessage);
diff --git a/packages/vscode/src/web/resources.ts b/packages/vscode/src/web/resources.ts
index 3473d3e1..d7775e80 100644
--- a/packages/vscode/src/web/resources.ts
+++ b/packages/vscode/src/web/resources.ts
@@ -24,7 +24,8 @@ export const initializeResources = async (context: vscode.ExtensionContext): Pro
     'vega.min.js',
     'vega-lite.min.js',
     'tabulator.min.js',
-    
+    'mermaid.min.js',
+
     // Example documents
     '1.idoc.md',
     'grocery-list.idoc.json',
diff --git a/packages/web-deploy/package.json b/packages/web-deploy/package.json
index 13b1e10a..5a63917c 100644
--- a/packages/web-deploy/package.json
+++ b/packages/web-deploy/package.json
@@ -1,5 +1,6 @@
 {
-  "name": "web-deploy",
+  "name": "@microsoft/web-deploy",
+  "private": true,
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
diff --git a/packages/web-frontend/package.json b/packages/web-frontend/package.json
index 437cb881..3c044400 100644
--- a/packages/web-frontend/package.json
+++ b/packages/web-frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "web-frontend",
+  "name": "@microsoft/web-frontend",
   "private": true,
   "version": "1.0.0",
   "main": "index.js",