Getting started

Table of contents

• Step 1 — Find it in the palette
• Step 2 — Drag it onto the view
• Step 3 — Give it room
• Binding a definition to real data
  • From an expression
  • From a script
  • Highlighting live state
• Newlines matter

---

Step 1 — Find it in the palette

With the module installed, open a Perspective view in the Designer. In the component palette, look for the Cognidata Ignition category and the Mermaid Chart entry.

If the category is missing, close and reopen the Designer — new components register when the Designer session starts, not when the module installs.

Step 2 — Drag it onto the view

It arrives with a sample flowchart already in its definition prop, so you should see a rendered diagram immediately:

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

Step 3 — Give it room

The component fits the diagram to whatever space it has. In a coordinate container, size it to roughly the diagram’s aspect ratio; in a flex container, give it a sensible grow or an explicit height. A very short component will shrink the diagram rather than clip it.

If a diagram is tall and narrow, try fitMode: width so it fills the horizontal space and scrolls vertically instead of shrinking to fit.

---

Binding a definition to real data

The definition prop is just a string, so anything that produces a string can drive the diagram. That’s where the component earns its keep — bind it and the picture follows your data.

From an expression

A state diagram driven by an expression binding:

"stateDiagram-v2\n" +
"    [*] --> Idle\n" +
"    Idle --> Running\n" +
"    Running --> Fault\n" +
"    Running --> Idle\n" +
"    Fault --> Idle"

From a script

Build the definition in a transform or a script and write it to the prop. For example, turning a dataset of line stations into a flowchart:

def transform(self, value, quality, timestamp):
    lines = ["flowchart LR"]
    for row in range(value.rowCount):
        station = value.getValueAt(row, "station")
        nxt = value.getValueAt(row, "next_station")
        if nxt:
            lines.append("    %s --> %s" % (station, nxt))
    return "\n".join(lines)

Highlighting live state

Mermaid supports per-node classes, which is the cleanest way to reflect live status. Define the classes once in the definition and apply them based on your data:

def transform(self, value, quality, timestamp):
    running = value  # a boolean tag value
    state = "running" if running else "stopped"
    return "\n".join([
        "flowchart LR",
        "    classDef running fill:#16a34a,color:#fff,stroke:#15803d",
        "    classDef stopped fill:#dc2626,color:#fff,stroke:#b91c1c",
        "    PUMP[Pump 1] --> TANK[(Tank)]",
        "    class PUMP %s" % state,
    ])

Escape text that comes from your data. Mermaid has its own syntax — characters like [, {, |, " and --> are meaningful. If node labels come from a database or operator input, wrap them in quotes (A["Line 1 (west)"]) so stray punctuation can’t break the parse or silently change the diagram’s shape.

Newlines matter

A Mermaid definition is line-oriented. If your definition arrives with its newlines collapsed into spaces — a common result of joining strings carelessly, or of a database column that stripped them — it will not parse. When building definitions in a script, join with "\n" explicitly, as in the examples above.