A zero-dependency, interactive Data Flow Diagram (DFD) editor and visualizer built with pure HTML, CSS, and JavaScript — styled as a vintage CRT computer terminal.
- Drag-and-drop nodes with 10px grid snapping
- Draw connections by dragging from one node to another
- Pan & zoom the canvas with mouse wheel and drag
- Animated data packets — glowing dots pulse along flow arrows in real time
- Click-to-inspect any element to edit its properties
- Cursor feedback — cursor changes based on active tool (pointer, cell, crosshair)
- Visual Editor — place and connect nodes directly on the SVG canvas
- Script Editor — write diagrams using a simple text-based DSL (Domain-Specific Language):
# Nodes E1[Customer] P1(Process Order) S1|Orders Store| # Flows E1 -> P1 : Order Details P1 -> S1 : Save Order - Changes sync bidirectionally — edit the script and the canvas updates; drag a node and the script updates.
| Element | Syntax | Shape |
|---|---|---|
| External Entity | E1[Name] |
Double-bordered rectangle |
| Process | P1(Name) |
Split circle (ID top, label bottom) |
| Data Store | S1|Name| |
Gane-Sarson open-right box with ID column |
| Data Flow | E1 -> P1 : Label |
Curved arrow with label |
| Theme | Description |
|---|---|
| 🟢 Green Phosphor | Classic terminal green-on-black |
| 🟠 Amber Phosphor | Warm amber CRT monitor |
| 🔵 Blueprint CAD | Engineering blueprint blue |
| 📄 Vintage Paper | Light retro computer paper |
| ⚫ Sleek Dark | Modern dark mode with blue accents |
| 💜 Cyberpunk Neon | Hot pink, cyan, and purple neons |
| 🎮 Gameboy | Classic handheld dot-matrix green |
| 🟩 The Matrix | Hacker-style bright green on black |
- Scanline overlay
- Subtle screen flicker animation
- Corner vignette shadow
- Phosphor text glow
- All effects togglable with the CRT FX button
- Synthesized sound effects via the Web Audio API (no audio files needed)
- Click beeps, success chimes, error buzzes, delete slides, and a pitch-modulated dragging hum
- Toggle on/off with the SOUND button
| Format | Description |
|---|---|
| JSON | Full project state backup (re-importable via LOAD) |
| SVG | Self-contained vector diagram with embedded styles |
| PNG | Rasterized image with theme-accurate colors |
| High-resolution vector print via system print dialog | |
| TXT | Raw DSL script for version control or sharing |
| Markdown | Formatted .md document with embedded DSL code block |
- ATM System — card authentication, transactions, balance inquiries
- E-Commerce — checkout, payment, inventory, fulfillment
- Library Management — lending, returns, overdue alerts
- A modern web browser (Chrome, Firefox, Edge, Safari)
- No build tools, no package managers, no server required
- Clone or download this repository
- Open
index.htmlin your browser
That's it. Zero dependencies. Zero build steps.
dfd-visualizer/
├── index.html # Main HTML layout (CRT shell, panels, SVG canvas)
├── styles.css # Design system, 8 themes, CRT effects, responsive & print styles
├── sound.js # Web Audio API synthesizer for UI sound effects
├── diagram.js # Data model, DSL parser/serializer, undo/redo history
├── canvas.js # SVG rendering, drag/drop, zoom/pan, connections, cursor feedback
├── templates.js # Built-in DFD example presets (ATM, E-Commerce, Library)
├── app.js # Application glue: event bindings, exports, bidirectional sync
└── README.md # This file
Scripts are loaded in this order (each depends on the ones above it):
sound.js— standalone audio enginediagram.js— standalone data model & parsertemplates.js— standalone template stringscanvas.js— depends onDiagramModelandSoundManagerapp.js— orchestrates all modules
| Shortcut | Action |
|---|---|
Ctrl + Enter |
Compile DSL script |
Escape |
Reset tool to Select mode / deselect |
| Mouse wheel | Zoom in/out |
| Click + drag (canvas bg) | Pan the viewport |
# External Entity — square brackets
E1[Customer Name]
# Process — parentheses
P1(Process Name)
# Data Store — pipes
S1|Store Name|
# Basic flow
E1 -> P1
# Flow with label
E1 -> P1 : Order Details
Positions are auto-generated and appended to the script when you drag nodes:
# Positions
E1: 80, 220
P1: 280, 120
S1: 480, 120
Lines starting with # are treated as comments or section headers.
Nodes without explicit positions are arranged in a circular layout centered on the canvas. Once you drag a node, its position is saved into the # Positions block in the DSL script.
All themes are implemented as CSS custom properties on the <body> class:
.crt-theme-green {
--bg-color: #000b00;
--text-color: #33ff33;
--border-color: #33ff33;
--glow-color: rgba(51, 255, 51, 0.6);
/* ... */
}Each theme defines 12 CSS variables:
| Variable | Purpose |
|---|---|
--bg-color |
Main background |
--card-bg |
Panel/card backgrounds |
--text-color |
Primary text and strokes |
--text-dim |
Dimmed/secondary text |
--text-bright |
Bright highlights |
--border-color |
Panel borders |
--border-dim |
Subtle borders |
--grid-line-color |
SVG canvas grid |
--selection-bg |
Active/selected state fill |
--accent-color |
Accent highlights |
--glow-color |
SVG glow filter color |
--danger-color |
Delete/error states |
To add a custom theme:
- Define a new
.crt-theme-yournameblock instyles.csswith all 12 variables - Add an
<option value="yourname">in the theme<select>inindex.html
- Self-contained with embedded
<style>block - Cropped to a bounding box around your diagram (snapped to 40px grid)
- Theme-accurate colors baked in via CSS variables
- Rendered via offscreen HTML5 Canvas from the SVG clone
- Auto-cropped to diagram bounds
- Background color matches active theme
- Opens a print-optimized window with just the diagram
- Uses the browser's native "Save as PDF" for lossless vector output
- Landscape orientation with
@pagerules - Requires popups to be allowed in the browser
- Raw DSL script including node definitions, flows, and position metadata
- Can be re-imported by pasting into the Script Editor and clicking RUN
- Formatted
.mddocument with generation timestamp - Embeds the full DSL script in a fenced code block
- Includes instructions for re-importing
- Zero external dependencies — everything is vanilla JS/CSS/HTML
- SVG-based rendering — all diagram elements are vector, scalable, and exportable
- Module pattern — each JS file exposes a singleton via IIFE (
SoundManager,DiagramModel,CanvasManager,TemplateRegistry) - Bidirectional sync — the Script Editor and Visual Canvas stay in sync through
DiagramModel.registerOnChange()callbacks
- User edits DSL script →
parseDSL()validates and updates model →triggerChange()→CanvasManager.draw()rebuilds SVG - User drags node →
updateNode()modifies model →triggerChange()→generateDSL()updates editor text
- History snapshots are stored as JSON string serializations of the full diagram state
- Maximum 50 undo levels
- Drag operations save one snapshot at drag-start (continuous moves skip history to avoid flooding)
- Share Tech Mono and VT323 loaded from Google Fonts CDN
- Falls back to system
monospaceif fonts fail to load
- Dual-layer SVG pattern (40px major lines / 20px dashed minor lines)
patternTransformsyncs with viewport transform for smooth pan/zoom
- Modern browsers with ES6+ support (Chrome 60+, Firefox 55+, Edge 79+, Safari 12+)
- Web Audio API required for sound (gracefully degrades if unavailable)
- Clipboard API used for copy with
execCommandfallback for older browsers
MIT License — free for personal and commercial use.