Select a folder to store your flowcharts. FlowScript will read and save .flow files directly to your local file system.
Or drag & drop a folder here
No .flow files yet
Eraser.io compatible syntax
Start [shape: oval] Check [shape: diamond] Input [shape: parallelogram] Store [shape: cylinder] Process // rectangle (default) Node [shape: oval, color: green, icon: check]
rectangle, oval, diamond, cylinder parallelogram, document, hexagon trapezoid, triangle, ellipse, star
Long node name // wrap (default) Node [text: fit] // shrink font to fit Node [text: clip] // truncate with ...
A > B // Arrow A > B: label // With label A > B > C // Chain A > B, C, D // Branching A - B // Line (no arrow) A -- B // Dotted line A --> B // Dotted arrow A <> B // Bidirectional
Backend [color: blue] {
API [icon: api]
Database [shape: cylinder]
}
Frontend > Backend: REST API
// Use ANY icon from tabler-icons.io Search // Examples: user, users, settings, home, bell code, terminal, git, bug, brand-github server, database, cloud, api, network mail, message, phone, send, inbox file, folder, download, upload, clipboard check, x, alert, info, plus, minus lock, key, shield, fingerprint, eye photo, video, music, camera, microphone arrow-right, chevron, external, link clock, calendar, hourglass chart-bar, graph, trending-up shopping-cart, credit-card, currency-dollar world, location, map-pin, compass docker, brand-aws, cpu, device-mobile share, star, heart, bookmark, thumb-up brand-aws,brand-google,brand-apple Usage: Node [icon: brand-github] // Filled variant: append -filled to any icon name Node [icon: heart-filled] Node [icon: star-filled] Node [icon: bell-filled]
// Primary red, green, blue, yellow, purple orange, pink, cyan // Extended teal, indigo, violet, fuchsia, rose lime, emerald, sky, amber // Neutrals gray, slate, zinc, stone // Special brown, black, white // Light variants light-red, light-green, light-blue light-yellow, light-purple, light-pink light-orange, light-cyan // Dark variants dark-red, dark-green, dark-blue dark-purple, dark-orange Usage: Node [color: emerald] Or hex: Node [color: #3b82f6]
direction down // default (top-to-bottom) direction up // bottom-to-top direction right direction left direction top // alias for down direction bottom // alias for up
type er Type
CUSTOMER [icon: user] Entity (indented lines
id int PK are its attributes)
name string
CUSTOMER ||--o{ ORDER : places
^^^^^^ ^^ Cardinality (crow's foot)
CUSTOMER 1-many ORDER Short form also works
type org Acme Corp Type + optional chart title
Alice [title: CEO] Card: name + role
Bob [title: VP Eng] Indentation is the
Carol [title: EM] reporting line
Grace > Heidi Explicit: Parent > Child
Drag a manager and their
whole subtree comes along.
type sequence Add at the top to force a sequence diagram
Client [icon: monitor, color: gray] Actor
Client > Server: Fetch data Message
Client > Client: Poll Self message
Server --> Client: Cached Dotted arrow
loop [label: retry] { ... } loop / opt / alt /
else [label: fallback] { ... } par / break, + else / and
activate Server Activation bar on
deactivate Server an actor lifeline
Drag node Moves a single node (position saved as pos: x,y) Drag group Moves the whole group with its nodes Double-click Releases a dragged node/group back to auto-layout Esc Cancels a drag in progress Edges re-route live as you drag, and groups grow to keep containing the nodes you move. Dragged positions are written into the .flow text as [pos: x,y], so they persist in the file itself.
Ctrl+S Save version (with comment) Ctrl+N New file
• Auto-saves every 5 minutes • Click "History" to view versions • Compare, preview, and restore • Ctrl+S to save with description
Are you sure you want to delete ? This cannot be undone.
Enter a name for your new flowchart:
Add a description for this version: