Nodes — a personal flowchart project

Nodes is a browser-based flowchart editor I built with HTML, vanilla JavaScript, SVG, Tailwind CSS, and FlyonUI. I wanted one place where I could draw program logic, understand the path from start to end, and turn the result into something useful without creating an account.

✨ Open Nodes

Built and maintained by @dev.mako (devkyato).

Why I made it

I thought about that point too: a flowchart should not stop being helpful once the shapes look correct. It should help explain the logic, reveal a missing path, and give you a clean way to carry the work forward.

Oh! On the privacy part, I also wanted the default to be simple. Projects and preferences stay in the browser. Nodes has no account system, analytics, diagram API, or remote project storage.

How it works

1. Start a blank flowchart from the local project library.
2. Add standard shapes, initialize the variables you need, and connect each step in the order the program actually follows.
3. Select any shape or connector to change its text, type, position, color, border, route, or marker.
4. Open Code Studio when you want to check the flow, write the logic as text, or generate pseudocode, Python, or C++.
5. Keep working locally, download an editable JSON or XML copy, or export a clean SVG or PNG.

I generate code as a small state machine. That choice keeps branches and loops understandable instead of flattening the diagram into a list that only looks correct.

What is inside

• Twelve standard flowchart symbols with accurate SVG geometry
• A local project library with search, duplicate, delete, and visual previews
• Direct multiline text editing plus standalone text
• Straight, elbow, and curved connectors that remain attached
• Selection, alignment, distribution, grouping, layers, locking, and history
• Pointer, keyboard, zoom, pan, resize, copy, paste, undo, and redo support
• Automatic local drafts and named browser checkpoints
• Portable JSON and structured XML project files
• Diagram-aware SVG and high-resolution PNG export
• Pseudocode, Python, and C++ generation with flow validation
• Responsive light, dark, and system themes with reduced-motion support
• Searchable shapes, searchable commands, settings, and keyboard shortcuts

Run it locally

Install the development dependencies and start the local server:

npm install
npm start

Then open http://127.0.0.1:4173.

Essential controls

Action	Control
Select multiple	Shift + click or drag a selection rectangle
Pan	Hold Space and drag
Zoom	Ctrl/Cmd + mouse wheel
Edit text	Double-click a shape, label, or standalone text
Edit selected shape	Enter or use the contextual Edit action
Lock / unlock	Select one shape and use the contextual Lock action
Add standalone text	Double-click empty canvas or use Text
Move precisely	Arrow keys; hold Shift for 10 px
Duplicate	Ctrl/Cmd + D
Copy / paste	Ctrl/Cmd + C / Ctrl/Cmd + V
Undo / redo	Ctrl/Cmd + Z / Ctrl/Cmd + Shift + Z
Finish text editing	Click outside or Ctrl/Cmd + Enter
Cancel text editing	Escape
Open command menu	Ctrl/Cmd + K

Project files

index.html          Local project library and home page
editor.html         Flowchart editor structure
home.js             Multi-project local browser storage
style.css           Interface and responsive styling
script.js           State, rendering, interaction, persistence, export
src/flyon.css       Tailwind and FlyonUI build entrypoint
scripts/            Dependency-free local server and build packaging
tests/              Headless-browser workflow verification
.github/            Manual CI, releases, and contribution templates
docs/               Architecture and release notes for maintainers

Quality checks

npm test
npm run build

The browser smoke suite checks project creation, previews, settings, command search, menus, dialogs, locking, rendering, connectors, zoomed dragging, resizing, text editing, history, local persistence, XML/JSON projects, generated code, and SVG/PNG export.

Privacy

Projects and editor settings stay in the browser unless you choose to download or import a file. I intentionally kept the published application free of analytics, accounts, API calls, and remote diagram storage.

A note from me

I’m @dev.mako. I made Nodes because I wanted a flowchart tool that felt calm, stayed private, and still understood program logic. If it saves you time, star the repository, share the editor, or tell me which part would make your next flow easier.

Contributing

See CONTRIBUTING.md. Usage help is in SUPPORT.md, and security reports should follow SECURITY.md.

License

MIT