Standalone web tool for visualizing DFIR incident timelines. No installation, no backend, no build step — runs directly in the browser or on GitHub Pages.
AttackFlow is designed for security analysts who need to reconstruct and communicate the sequence of events in an incident. It generates clean, exportable timeline visualizations suitable for technical reports, executive presentations, and post-incident documentation.
- Two visualization modes — vertical (top-down) and horizontal (left-right)
- Temporal or linear spacing — events can be spaced proportionally to real elapsed time, or equidistantly
- Alternating layout in horizontal mode — labels alternate above and below the axis to prevent overlap
- Category support — events can be tagged with a category (e.g. MITRE ATT&CK tactic), rendered in a distinct color
- Manual separators — use
---syntax to define custom phase labels; without them, day boundaries are detected automatically - Resizable panels — drag the central divider to adjust workspace proportions
- Real-time rendering — timeline updates as you type, with 300ms debounce
- Invalid event handling — lines with unrecognized date formats are flagged with ⚠ and rendered in muted color
- Two themes — dark (Hinterlands) and light (Bliss), persisted in
localStorage - Contextual help —
?button with format reference in a modal
DD-MM-YYYY HH:MM | category | description
DD-MM-YYYY HH:MM | description
| category | description (no date)
Free text without pipes
--- Section label
# Comment (ignored)
- Date formats:
DD-MM-YYYY HH:MMorYYYY-MM-DD HH:MM. Seconds are optional:HH:MM[:SS] - Category is optional. If omitted, the second field is treated as the description.
---separators activate manual mode — grouping depends on your labels, not automatic date detection.- Dateless events — can be written without pipes (free text) or with pipes but no date (
| category | description).
15-01-2024 09:23 | Initial Access | CVE-2023-46604 exploited on ActiveMQ
15-01-2024 09:31 | Execution | Encoded PowerShell command via mshta.exe
15-01-2024 10:45 | Lateral Movement | WMI to secondary DC
15-01-2024 11:02 | Credential Access | LSASS dump via ProcDump
15-01-2024 11:18 | Persistence | Scheduled task created
15-01-2024 13:30 | C2 | Cobalt Strike beacon established
16-01-2024 05:44 | Exfiltration | Data uploaded to MEGA.nz
| Control | Function |
|---|---|
| Drag the central divider | Resize panels |
⇄ / ⇅ |
Toggle timeline orientation |
≡ / ~ |
Toggle equidistant / time-proportional spacing |
☀ / ☾ |
Toggle dark / light theme |
? |
Show format reference |
Based on omarchy-hinterlands-theme. Monochromatic grayscale palette, no accent color.
Based on omarchy-bliss-theme. Warm gray with teal accent (#218080).
| Component | Technology |
|---|---|
| Rendering | SVG generated in vanilla JavaScript |
| Icons | Lucide (inline SVG, MIT) |
| Layout | CSS Flexbox |
| Font | Hack via Google Fonts |
| Persistence | localStorage |
| Dependencies | None — no frameworks, no bundler, no backend |
The entire application is a single index.html file.
index.html # Full application
preview.html # Theme/palette sandbox
data/
sample.json # Reference incident data (SolarWinds SUNBURST)
Open index.html directly in the browser, or publish via GitHub Pages. No build step or server configuration required.