Select a shape to edit properties
A powerful browser-based diagramming tool for creating flowcharts, network diagrams, org charts, P&ID engineering diagrams, and more.
Shapes are organized into collapsible groups in the left sidebar. Click the section header to expand or collapse each group.
| Shapes | Standard flowchart symbols: Process, Decision, Terminator, Data, Document, Predefined Process, Manual Input, Preparation, Delay, Multi-Document, Stored Data, Internal Storage, Display, Manual Operation, Merge, Connector, Line, Text |
| Organization | Org chart cards: Org Card, Executive, Person, Department, Team, Role |
| Network | Network devices: Server, Database, Cloud, Router, Switch, Firewall, Laptop, Wireless AP, L3 Switch, Hub, Bridge, VPN Gateway, Load Balancer, Proxy, Web Server, App Server, VM, PC, Mobile, Printer, NAS, IDS/IPS, VoIP, IoT |
| Engineering | P&ID / process engineering: Vessel, Tank, Pump, Valve, Heat Exchanger, Tower, Filter, Fan, Cooling Tower, Instrument, Motor Valve, Mixer, Clarifier, Screen, Vapor, Blower, Evaporator, Roll Press, Kettle, Tank Car, Venturi, Flash Drum, Shell & Tube, Boiler, Fired Heater |
Org chart shapes have special text positioning:
Select a type from the Connectors section in the sidebar before drawing, or change an existing connector's type in the Properties panel.
| Straight | Direct line between two points |
| Orthogonal | Right-angle routed line (default) |
| Curved | Bezier curve between two points |
| Straight Both | Straight line with arrows on both ends |
| Orthogonal Both | Orthogonal with arrows on both ends |
| Curved Both | Curved with arrows on both ends |
Connectors automatically re-route when you move connected shapes.
Right-click on the canvas or a shape for quick access to: Copy, Paste, Duplicate, Delete, Bring to Front, Send to Back, Lock/Unlock, Select All.
The minimap in the bottom-right corner shows an overview of your entire diagram with a blue rectangle indicating the current viewport.
Select a shape or connector to see its properties in the right panel. Properties are organized into groups:
| Text | The text displayed inside the shape. Also editable by double-clicking the shape. |
| Font | Choose from 10 font families: Sans-serif, Serif, Monospace, Arial, Georgia, Times New Roman, Courier New, Verdana, Trebuchet MS, Impact. |
| Font Size & Color | Adjust text size (8-72px) and color. |
| Fill Color | Background color of the shape. For org chart shapes (Card, Executive, Department, Team), this colors only the header band. |
| Border Toggle | Checkbox to enable/disable the border. When enabled, set border color and width. |
| Size (W / H) | Width and height of the shape in pixels. |
| Lock / Front / Back | Lock the shape, or change its z-order. |
| Label | Text displayed at the midpoint of the connector. |
| Line Color & Width | Visual appearance of the line. |
| Style | Solid, Dashed, or Dotted. |
| Type | Straight, Orthogonal, or Curved. |
| Both Arrows | Toggle to add arrowheads on both ends. |
Click the moon icon in the toolbar to toggle between light and dark themes. The canvas and grid always remain white for readability. The application starts in dark mode by default.
| New (Ctrl+N) | Create a blank canvas. Prompts to confirm if you have unsaved work. |
| Open (Ctrl+O) | Open a previously saved .fcc.json file. |
| Save (Ctrl+S) | Save with a native Save dialog (in supported browsers). Files are saved as .fcc.json with a timestamped filename like flowchart-20260407-143022.fcc.json. |
| Templates | Open the Quick-Start Templates modal with 8 pre-built diagrams. |
Your work is automatically saved to the browser's local storage every 5 seconds. When you reopen the app, your last session is restored and centered on screen.
| PNG | Export as a high-resolution PNG image (2x DPI for crisp output). |
| SVG | Export as a scalable vector graphic (simplified rendering). |
| PDF (Ctrl+P) | Opens a print dialog. Use your browser's "Print to PDF" to create a PDF file. |
When a page size is selected (8.5x11 or 11x8.5), exports use the page dimensions. Otherwise, exports auto-size to fit your content with padding.
8 professionally designed templates for common use cases:
Select a page size from the dropdown in the toolbar:
Selecting a page size draws a bordered page on the canvas with a shadow. The view auto-zooms to fit the page.
Click the Title Block button in the toolbar to open the title block editor. The title block appears in the bottom-right corner of the page and contains:
The title block is included in PNG and PDF exports when a page size is selected.
| Ctrl+N | New file |
| Ctrl+O | Open file |
| Ctrl+S | Save file |
| Ctrl+P | Print / PDF |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| Ctrl+C | Copy |
| Ctrl+V | Paste |
| Ctrl+X | Cut |
| Ctrl+D | Duplicate |
| Ctrl+A | Select all |
| Delete / Backspace | Delete selected |
| Escape | Deselect / Cancel |
| Ctrl+0 | Fit to screen |
| Ctrl++ | Zoom in |
| Ctrl+- | Zoom out |
| Mouse Wheel | Zoom at cursor |
| Space + Drag | Pan canvas |
| Middle Mouse + Drag | Pan canvas |
| Arrow Keys | Nudge selected shapes |
| Double-click | Edit shape text |
| Shift+Click | Add/remove from selection |
| Click + Drag (empty) | Marquee selection |
| Right-click | Context menu |
| F1 | Open this help page |
Choose a template to get started instantly