test page 
Diagram made with Mermaid.js
%% Configuration
---
config:
layout: elk
---
flowchart LR
A["Was the action deliberate
or grossly negligent?"] -- Yes --> B["Were the results intended?"]
B -- Yes --> O1["Sabotage or
malicious intention"]
B -- No --> C["Informed about procedures?"]
A -- No --> C
C -- Yes --> D["Were procedures clear,
workable, and accurate?"]
D -- Yes --> O3["Reckless Contravention"]
D -- No --> O4["Error caused by system"]
C -- No --> E["Would others have done the same?"]
E -- Yes --> F["Incorrect training
or experience?"]
F -- Yes --> O5["Careless error"]
F -- No --> O4
E -- No --> G["History of
contravening procedures?"]
G -- Yes --> O6["Training needed"]
G -- No --> O7["No blame error"]
O1 --- DA["Disciplinary Action"]
O3 --- DA
O4 --- MA["Management Action"]
O5 --- TC["Training / Coaching"]
O6 --- TC
O7 --- TC
%% Class Assignments
A:::darkblue
B:::decision
O1:::outcome
C:::darkblue
D:::decision
O3:::outcome
O4:::outcome
E:::darkblue
F:::decision
O5:::outcome
G:::darkblue
O6:::outcome
O7:::outcome
DA:::disciplinary
MA:::management
TC:::training
%% Style Definitions
classDef darkblue fill:#00008B,stroke:#00004B,stroke-width:3px,color:#fff,font-weight:bold,font-size:16px;
classDef decision fill:#ADD8E6,stroke:#00008B,stroke-width:2px,color:#000;
classDef outcome fill:#90EE90,stroke:#000,stroke-width:2px;
classDef disciplinary fill:#FF0000,stroke:#8B0000,stroke-width:3px,color:#fff,font-size:18px,font-weight:bold,rx:10,ry:10;
classDef management fill:#FF8C00,stroke:#FF4500,stroke-width:3px,color:#fff,font-size:18px,font-weight:bold,rx:10,ry:10;
classDef training fill:#2962FF,stroke:#006400,stroke-width:3px,color:#fff,font-size:18px,font-weight:bold,rx:10,ry:10;
Quick example of branching questions. Would need to add custom HTML. Can spend more time to make it look better if this approach is ok.