Flowchart & Diagram Editor
A drag-and-drop diagram editor for flowcharts, process maps and simple architecture sketches. Add process boxes, decision diamonds, terminators, input/output parallelograms, database cylinders and text labels; connect them with arrows that stay attached when shapes move; edit text with a double click, recolor shapes, snap to the grid, undo and redo freely. Starter templates cover basic process flows, decision trees and swimlanes; optional Mermaid paste-in for power users. Diagrams autosave to your browser and export as crisp SVG, PNG (with optional transparent background) or JSON you can reload later.
Runs 100% in your browser — nothing you paste leaves your device.
Read the full guide to this tool
Notes
- Connectors are anchored to shapes, not points: drag a shape and every arrow follows, like in desktop diagram tools.
- Keyboard shortcuts add shapes quickly (P process, D decision, T start/end, I I/O, B database, E ellipse, L label).
- SVG export is vector — it stays sharp at any size; PNG export renders at 2× resolution with an optional transparent background for slides and docs.
- Autosave uses your browser's local storage. Download the JSON file for a permanent copy or to move a diagram between devices.
- Runs 100% in your browser — nothing you paste leaves your device.
Explore the idea
Related tools
HTML & JS Playground
Write HTML, CSS and JavaScript with a live preview and console.
Python Playground
Run Python with numpy, pandas and matplotlib in your browser.
LaTeX Equation Editor
Type LaTeX, see the rendered formula live; export SVG or PNG.
Base64 / URL / HTML Encoder-Decoder
Encode and decode Base64, hex, URL percent-encoding and HTML entities — with auto-detect, bulk lines and file drop.
CSS Gradient, Shadow & Radius Generator
Visual generators for gradients, box-shadows and border radii.
Color Converter & Contrast Checker
HEX ↔ RGB ↔ HSL ↔ OKLCH, plus WCAG contrast ratios.