Flowchart Component Library
This page demonstrates the HTML-based flowchart components available for Argent Public investigations. All examples use pure HTML/CSS with no JavaScript.
Example 1: Simple Decision Tree
Use case: Show a yes/no decision and its consequences
Was there competitive bidding?
Government Contract
$458M initial budget
↓
Competitive Bidding Process?
YES
Multiple suppliers compete
↓
Market forces control costs
NO
Single supplier (SAP)
↓
No competition on pricing
Actual Result:
$1.1 billion final cost (+140%)
$1.1 billion final cost (+140%)
Example 2: Timeline (Vertical Linear Flow)
Use case: Show chronological events with causation
2017
Contract signed with SAP
Contract signed with SAP
↓
2018-2020
Costs begin escalating No public reporting
Costs begin escalating No public reporting
↓
2021
Internal auditors raise concerns Warnings not acted upon
Internal auditors raise concerns Warnings not acted upon
↓
2023
Project delivered at $1.1B +140% over budget
Project delivered at $1.1B +140% over budget
↓
2026
Auditor General Report 586 pages, 75 hearing days
Auditor General Report 586 pages, 75 hearing days
Example 3: Multi-Branch Process Flow
Use case: Show complex decision trees with multiple paths
Public Procurement Decision Tree
Ministry needs IT system
↓
Sole-source exemption claimed?
NO
Public tender published
↓
3+ bids received?
↓
Evaluation committee reviews
↓
Best value selected
YES
Justification documented?
↓
Valid reason?
Yes
↓
Legal exemption
No
↓
Irregular procurement
Example 4: Comparison (What Should Have Happened vs. What Happened)
Use case: Show regulatory requirements vs. actual events
SAAQclic Procurement: Expected vs. Actual
Ministry of Health needs IT system (2017)
↓
REGULATORY PATH
Public call for tenders
↓
Multiple suppliers bid
↓
Evaluation committee scores bids
↓
Best value contract awarded
↓
Competitive pricing
ACTUAL PATH
Direct negotiation with SAP
↓
No competitive bids
↓
Single-source justification
"System integration critical"
↓
SAP contract signed ($458M)
↓
Final cost: $1.1 billion (+140%)
Example 5: Simple Two-Step Process
Use case: Show a straightforward cause-and-effect
Sole-source contract awarded
↓
No competitive pressure on costs
↓
Cost Overrun
$458M → $1.1B
$458M → $1.1B
Component Reference
Available CSS Classes
Containers:
.flowchart— Main container (centered, with background).flowchart.timeline— Vertical timeline variant.flowchart-title— Optional title/heading
Nodes (boxes):
.flow-node— Standard node.flow-node.start— Starting point (green border).flow-node.end— Ending point (green background).flow-node.proper— Correct/legal process (green tint).flow-node.irregular— Problematic action (red tint).flow-node.warning— Cautionary step (yellow tint).flow-node.theoretical— Didn’t happen (faded gray)
Decisions:
.flow-decision— Diamond-shaped decision point (yellow)
Layout:
.flow-branches— Container for side-by-side branches.flow-branch— Individual branch column.flow-branch-label— Label above branch (add.yesor.no).flow-convergence— Convergence point after branches
Connectors:
.flow-arrow— Arrow symbol (use↓→←↑).flow-arrow.thick— Emphasized arrow (green).flow-arrow.faded— De-emphasized arrow (gray).flow-arrow-label— Small text label on arrow
Outcomes:
.flow-outcome— Final result box (green).flow-outcome.negative— Negative result (red)
HTML Structure Template
<div class="flowchart">
<h3 class="flowchart-title">Optional Title</h3>
<!-- Simple linear flow -->
<div class="flow-node start">Starting point</div>
<div class="flow-arrow">↓</div>
<div class="flow-node">Step 2</div>
<div class="flow-arrow">↓</div>
<!-- Decision point -->
<div class="flow-decision">Question?</div>
<!-- Branching -->
<div class="flow-branches">
<div class="flow-branch">
<div class="flow-branch-label yes">YES</div>
<div class="flow-node proper">Good outcome</div>
</div>
<div class="flow-branch">
<div class="flow-branch-label no">NO</div>
<div class="flow-node irregular">Bad outcome</div>
</div>
</div>
<!-- Convergence -->
<div class="flow-convergence">
<div class="flow-outcome">Final result</div>
</div>
</div>
Mobile Behavior
- Desktop: Side-by-side branches, full spacing
- Mobile: Branches stack vertically, nodes resize
- All flowcharts are fully responsive and print-friendly
Copy-Paste Ready: Minimal Example
<div class="flowchart">
<div class="flow-node start">Start here</div>
<div class="flow-arrow">↓</div>
<div class="flow-node">What happened</div>
<div class="flow-arrow">↓</div>
<div class="flow-outcome negative">Bad result</div>
</div>