Cognidata Mermaid Chart

An Ignition module that adds a custom Perspective component: the Mermaid Chart. It renders a Mermaid diagram definition as an SVG inside a Perspective view, with zoom, pan, SVG export, and a two-way-bound zoomLevel property.

Get started Property reference

---

Why a text-defined diagram

Mermaid turns a plain-text description of a diagram into a rendered picture. Instead of maintaining a drawing, you maintain a few lines of text — which means a diagram can be generated from a tag value, a database query, or a script, and stay current on its own.

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Render chart]
    B -->|No| D[Update definition]

The component renders entirely in the browser. It makes no outbound network requests, so it works on air-gapped gateways.

At a glance

Palette category	Cognidata Ignition
Component name	Mermaid Chart
Default name	mermaidChart
Component ID	cognidata.display.mermaid-chart
Scope	Perspective (browser-rendered)

Installing

1. Download the .modl for the Mermaid Chart module.
2. In the Gateway web UI go to Config → Modules, scroll to the bottom of the module list, and click Install or Upgrade a Module…. Choose the .modl file and click Install.
3. Accept the certificate the first time you install a Cognidata module. Later upgrades won’t ask again.
4. Confirm the module appears under the Cognidata heading with state Running.

Installing a module restarts the module subsystem, not the whole gateway. Close and reopen any open Designer session so the new component registers in the palette.

Requirements

• Ignition 8.1.32 or newer — the module is built against the 8.1 SDK.
• A Perspective license. This is a Perspective component; it has no Vision or gateway-scripting surface.
• No network access. Rendering happens in the browser, with no calls out to mermaid.js.org or anywhere else.

Where to go next

• Getting started — add the component to a view and bind a definition to real data.
• Property reference — every property, type, and default.
• Zoom, download & security — how users interact with the diagram, and the security trade-offs.
• Troubleshooting — when the diagram won’t render.