Important
The Branching Component is now developed and released as the Branching Diagram in mustry-perspective-component-module. This repository is kept for reference and is no longer maintained.
→ Go to mustry-perspective-component-module · What changed in the move
An Ignition Perspective module providing a Branching Component: a horizontal tree/flow renderer for track-and-trace, routing and decision paths.
The project was originally called Mustry UI, on the assumption it would grow into a component suite. It only ever shipped this one component, so the name has been dropped in favour of one that says what it is. The module's own identity is unchanged — see below.
| Module ID | org.mustry.mustryui |
| Module name | Mustry UI |
| Artifact | Mustry_UI.modl |
| Latest release | v2.0.0 — Ignition 8.3 |
| Requires | Ignition 8.3+, Java 17 |
| Status | Unmaintained — see the notice above |
Those three identifiers still carry the old Mustry UI name and are deliberately left alone: the module id is what an Ignition gateway keys an installed module on, and Mustry_UI.modl is the asset attached to every published release. Renaming them would only make this documentation disagree with what people have already downloaded and installed.
- Download
Mustry_UI.modlfrom the releases page. - In the Gateway web interface, open Config → Modules and install it.
- The Branching component appears in the Perspective component palette in the Designer.
Releases before v2.0.0 target Ignition 8.1; v2.0.0 is the 8.3 build.
Drop a Branching component on a view and bind its data property to an array of nodes. Each node needs an id and a category; nextId lists the nodes it draws a path to. The root is detected automatically.
[
{ "id": 0, "name": "Intake", "category": 0, "nextId": [1, 2], "color": "#0a66c2" },
{ "id": 1, "name": "QA pass", "category": 0, "nextId": [3], "color": "#2e7d32" },
{ "id": 2, "name": "QA fail", "category": 1, "nextId": [4], "color": "#d32f2f" },
{ "id": 3, "name": "Ship", "category": 0, "nextId": [], "color": "#2e7d32",
"icon": { "path": "material/local_shipping", "color": "white" },
"tooltip": "**Ready to ship.**\nScan the pallet label." },
{ "id": 4, "name": "Scrap", "category": 1, "nextId": [], "color": "#d32f2f" }
]Two rules decide whether a tree draws: there must be exactly one root — a node with outgoing paths that no other node points at — and every node must be reachable from it, or it is not displayed. category is the row: nodes sharing a category are drawn on the same level, and a higher number sits lower.
Note that a path pointing back to an earlier node (a rework loop, say) is drawn as a stray diagonal by this component; the successor routes those properly.
Full property reference, including per-node styling and tooltips: doc/data_structure.md.
| Document | What it covers |
|---|---|
| Data structure | Component properties and the node data format |
| Ignition component | How the module is put together (Java scopes, web bundle, registration) |
| Signing the module | Keystore/certificate setup for producing a signed .modl |
./gradlew clean buildThe module is written to build/Mustry_UI.modl. Signing needs a keystore and a gradle.properties holding the credentials — see doc/signing_module.md. To build unsigned, set skipModlSigning.set(true) in build.gradle.kts.
gradle.properties and certificates/ are gitignored; never commit them.
The repository also contains dev_react/, a standalone React harness used to iterate on the component outside Ignition.
The successor is a superset in capability, adding vertical orientation, direction arrows, per-edge labels and styling, cleaner loop/back-edge routing, localization, selection events, and validation feedback for datasets that won't fully draw. It is free and open source under Apache-2.0, targets Ignition 8.3, and ships thirteen further components alongside the diagram.
Node data carries across unchanged — id, name, color, nextId, category, fill, style, icon, tooltip and tooltipStyle all mean the same thing. Two connector-colour properties were replaced rather than renamed, so a view built here needs adjusting:
| Here | In the new module |
|---|---|
connectionColor (component property) |
The --brn-line CSS variable, set via a style class or project stylesheet |
colorOutgoing (per-node boolean) |
Always on: a connector takes its source node's colour. Override an individual edge with data.edgeLabels[].color |
The practical difference is that colorOutgoing was opt-in per node, whereas the new component always colours a connector from its source node. If a node has no colour, its connectors fall back to --brn-line.
No license file was ever added to this repository. The successor is licensed under Apache-2.0.