An interactive visual editor for building and documenting cyber attack paths, intrusion scenarios, and incident response timelines.
As incident responders, we found ourselves constantly struggling to visualize and communicate attack paths effectively. Existing tools were either too complex, too expensive, or simply not designed for the fast-paced nature of incident response work.
We needed something that would let us quickly map out how an attacker moved through an environment, document our findings as we investigated, and produce clear visuals for reports and stakeholder briefings - all without fighting against the tool itself.
Compromise Canvas was built to solve that problem. It's the tool we wished we had during countless incident response engagements.
Compromise Canvas helps cybersecurity professionals visualize attack paths, document incidents, and create reports. Built for incident responders, red teamers, and security trainers who need to map out complex intrusion scenarios.
Key Features:
- Visual Attack Path Editor - Drag-and-drop interface for building compromise diagrams
- 27+ Asset Types - Cloud infrastructure, on-premises systems, identities, and threat actors
- MITRE ATT&CK Integration - Edge labels with tactics like Lateral Movement, Privilege Escalation, Exfiltration
- Incident Response Log - Document response actions alongside your diagram
- Timeline View - Chronological view of attack progression
- PDF Reports - Generate professional incident reports
- PNG Export - Export diagrams as images
- Templates - Pre-built scenarios to get started quickly
- 100% Client-Side - All data stays in your browser
Coming soon
- Node.js 18+
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/SagaLabs/CompromiseCanvas.git
cd CompromiseCanvas
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000 in your browser.
npm run build
npm run start- Add Assets - Drag assets from the left panel onto the canvas
- Connect Nodes - Click and drag from one node's handle to another to create connections
- Edit Properties - Click any node or edge to edit its properties in the right panel
- Set Criticality - Mark assets as Low, Medium, High, or Critical
- Mark Compromised - Toggle the compromised status on affected assets
| Category | Assets |
|---|---|
| On-Premises | Web Server, Database, Workstation, Domain Controller, Firewall, Router, Email Server, File Server |
| Cloud | Cloud Instance, Cloud Database, Load Balancer, Container, Function, Kubernetes, Tenant, Email, Storage, Collaboration |
| Identity | User accounts, Service accounts with MFA status and privilege levels |
| Threat Actors | Attacker, Command & Control (C2), Exfiltration endpoints |
Connections between nodes can be labeled with MITRE ATT&CK-aligned actions:
- Initial Access, Execution, Persistence, Privilege Escalation
- Defense Evasion, Credential Access, Discovery, Lateral Movement
- Collection, Command & Control, Exfiltration, Impact
- And more...
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Z |
Undo |
Ctrl/Cmd + Y |
Redo |
Ctrl/Cmd + C |
Copy selected |
Ctrl/Cmd + V |
Paste |
Delete |
Delete selected |
- PDF Report - Comprehensive incident report with executive summary, timeline, and asset details
- PNG Image - High-resolution diagram export
- JSON - Save/load diagrams for backup or sharing
- Framework: Next.js 15 with App Router
- UI Library: React 19
- Language: TypeScript 5
- Graph Visualization: ReactFlow
- Styling: Tailwind CSS
- Components: shadcn/ui (Radix UI)
- PDF Generation: jsPDF
- Icons: Lucide React
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── asset-library.tsx # Draggable asset panel
│ ├── custom-node.tsx # Node renderer
│ ├── custom-edge.tsx # Edge renderer
│ ├── properties-panel.tsx
│ ├── timeline-modal.tsx
│ └── ...
├── hooks/ # Custom React hooks
├── lib/ # Utilities and types
│ ├── types.ts # TypeScript definitions
│ ├── templates.ts # Built-in templates
│ └── utils.ts
└── public/ # Static assets
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
- Created by Christian Henriksen at SagaLabs
- Graph visualization powered by ReactFlow
- UI components from shadcn/ui
Train as you fight.