Attack Path Map Editor

# Attack Path Map Editor

[![Tests](https://github.com/tomituominen/APME/actions/workflows/test.yml/badge.svg)](https://github.com/tomituominen/APME/actions/workflows/test.yml)

A self-contained, single-file HTML5 tool for visualising and editing attack path
maps. Opens directly in any modern browser — no install, no server, no internet
access needed at runtime. Saves and loads in **Mermaid** format, wrapped in a
Markdown code block so committed files render as a diagram on GitHub.

## Run it

- **Hosted:** open <https://tomituominen.github.io/APME/> — nothing to install;
  it runs entirely in your browser, and because it's served over HTTPS the
  native Save/Open dialogs work in Chromium.
- **Locally:** clone or download the repo and open `index.html` (e.g. `open
  index.html`). For the native Save/Open dialogs, serve the folder instead
  (see the tip below).

> **Tip:** double-clicking the file (a `file://` page) works fully, but the
> native Save/Open *dialogs* (pick name + location, overwrite-in-place) need a
> secure context — serve the folder over `localhost`/HTTPS in a Chromium
> browser (e.g. `python3 -m http.server`). On `file://`, Firefox, or Safari,
> Save falls back to a filename prompt + download.

## Two ways to build a map

This tool is meant to be used either way:

- **Manually**, in the editor — draw the graph by hand with the keyboard
  shortcuts and mouse gestures below, then **Save**. This is the primary,
  install-free workflow.
- **Via the included Claude skill** — the repo ships
  [`attack-path-map.skill`](attack-path-map.skill), a [Claude
  Code](https://claude.com/claude-code) skill that generates a properly
  formatted APME `.md` from a described threat (a root outcome plus its attack
  paths). The output opens straight in the editor and renders on GitHub, so
  you can generate a first draft with Claude and then refine it by hand. Drag
  the `.skill` file into Claude Code (or place it in your skills directory) to
  install it. Its source lives unzipped in
  [`skills/attack-path-map/`](skills/attack-path-map/) (instructions plus a
  worked example); after editing it, run `skills/build.sh` to rebuild the
  `.skill`. The test suite fails if the two drift apart.

## Example

The repo ships [`sample-graph.md`](sample-graph.md) — open it in the editor.
Because the file is a fenced Mermaid block, GitHub renders it as a diagram;
here is `sample-graph.md`:

```mermaid
%%{init: {"flowchart": {"curve": "bumpX"}}}%%
flowchart RL
  n2(("Unwanted business outcome"))
  n4[("Cylinder asset")]
  n5["Square asset"]
  n6(("Round asset"))
  n7["Internal user"]
  n8["External user"]
  n2 -.-|"Action"| n4
  n2 ---|"Process"| n5
  n2 ---|"API"| n6
  n4 -.- n7
  n5 --- n8
  n6 --- n8
  linkStyle default stroke:#cccccc,stroke-width:7.5px;
  style n2 fill:#b3434a,stroke:#c67277,color:#ecf0f6
  style n4 fill:#008038,stroke:#40a06a,color:#ecf0f6
  style n5 fill:#b35c00,stroke:#c68540,color:#ecf0f6
  style n6 fill:#877200,stroke:#a59540,color:#ecf0f6
  style n7 fill:#156dbc,stroke:#5092cd,color:#ecf0f6
  style n8 fill:#6a737d,stroke:#8f969e,color:#ecf0f6
```

## Keyboard shortcuts

| Key             | Action                                          |
| --------------- | ----------------------------------------------- |
| **N**           | New free-floating node                          |
| **Tab**         | Chain a new node off the selected one (Shift+Tab reverses the edge) |
| **Enter**       | Sibling — new node sharing parents              |
| **C**           | Connect — then click a target node to draw an edge |
| **E**           | Add / edit the note on the selected node        |
| **← ↑ → ↓**     | Move the selection to the nearest node          |
| **R**           | Rename selected node                            |
| **Del** / **Backspace** | Delete selected (with cascade)          |
| **D**           | Flip layout direction (LR ↔ RL)                 |
| **A**           | Auto layout — un-pin everything, reflow, and fit |
| **F**           | Fit the whole graph to the viewport             |
| **⌘/Ctrl+S**    | Save (hold **Shift** for Save As)               |
| **⌘/Ctrl+Z**    | Undo (one step per action, last 100 steps)      |
| **⌘/Ctrl+Shift+Z** / **Ctrl+Y** | Redo                           |
| **Esc**         | Cancel any inline editor or gesture             |

Undo covers every edit, one step per action: a new node together with its
label, a whole drag, a delete with everything it cascaded to. Selecting,
panning and zooming aren't steps. Inside the label and note editors,
⌘/Ctrl+Z undoes your typing instead. New, Open and crash recovery start a
fresh history; it's kept in memory only, not saved with the file.

### Mouse gestures

- **Drag a line** — bend it (smooth quadratic Bezier; the click point follows
  the cursor).
- **Double-click a line** — toggle solid / dotted. New lines start **dotted**
  (the dotted "attack path" line is the common case); double-click to make one
  solid. Opened files k

... (truncated)