Operator guide
Follow the packet. Inspect the decision.
The map exposes both the full logical system and the path taken by one selected packet or checkpoint.
Controls
| Control | Behavior |
|---|---|
| Scenario / branch | Choose an independent modeled configuration. Protection failures and proxy behavior are explicit scenarios. |
| Packet / checkpoint | Select the SYN, return packet, data record, or other checkpoint. Its prerequisite session state is supplied by the preset. |
| Play / Next / Previous | Play advances through the trace and then the scenario’s next checkpoint. It stops at the final checkpoint. Next and Previous stay within the current trace. |
| Trace position | Scrub directly to a decision. Pauses playback. |
| Drag / Shift-drag | Orbit / pan. Mouse-wheel and pinch gestures zoom. Labeled buttons offer keyboard-accessible camera controls. |
| Follow packet | Keep the camera centered on the moving packet while retaining the orbit angle. Overview restores the initial camera and turns follow off. |
| Expand map | Give the diagram the full page width, moving the inspector below it. |
| Click a stage | Pause and open its reference details. Selecting a stage does not move the simulated packet or change the scenario. |
| Stage inspector | Keyboard-accessible alternative to clicking a diagram node. Lists inputs, results, outgoing paths and the chosen next step. |
The packet marker identifies the active stage; the highlighted path records this checkpoint’s progress. Dashed connectors are conditional branches. On a narrow screen, numbered nodes correspond to the numbered stage selector. The map’s depth separates logical groups; it does not depict chips, cores, or physical processing boards.
Three useful walkthroughs
1. DNAT and the return direction
Select Internet → DMZ · DNAT. Step through forwarding, NAT, and the second route lookup. At firewall Security policy lookup, compare the original destination IP with the resolved destination zone. Then select the SYN-ACK checkpoint and inspect reverse DNAT in the mapped headers.
2. TLS decryption and inner App-ID
Select TLS proxy → inner App-ID → inspect. The first checkpoint identifies TLS, selects decryption, and establishes the proxy. It ends in local handling. The second checkpoint is a later encrypted application record: SSL proxy processing exposes plaintext, inner App-ID runs, Security policy is reevaluated, content is inspected, and permitted data is re-encrypted before egress.
3. An allow rule followed by a block
Select Decrypted threat: drop original packet, then compare it with the alert scenario. The Security rule permits the application in both examples. The profile action determines whether this specific payload continues. The reset scenario also distinguishes the blocked original packet from separately generated resets.
Host it on Apache
Copy the contents of the package’s public/ directory into a web directory such as /var/www/html/ngfw/. Open /ngfw/index.html through your website. Assets and navigation use relative paths, so root and subdirectory deployment both work.
There is no backend, database, build step, API key, CDN, or required Python/Node service. Apache serves static files; the visitor’s browser computes and renders the simulation. The supplied README.md contains Linux copy commands, optional Apache configuration, validation steps and troubleshooting.
Maintain the model
| File | Purpose |
|---|---|
assets/model.js | Stages, edges, scenarios and deterministic trace generation. |
assets/explorer.js | 3D projection, camera, animation, controls and inspector updates. |
assets/site.css | Responsive layout and light/dark colors. |
assets/site.js | Inspector tabs and map expansion. |
After editing the model, run node tests/model.test.cjs from the package root. Node is only needed for these optional developer checks, never for production hosting. If you change asset contents, update the ?v=1.0.0 references in the HTML pages to a new version so browsers request the updated files.