WEB / APP / DATABASE / ARCHITECTURE

From screens
to systems.

Design a website, lay out a mobile app, model its database, and map the architecture behind it. One canvas for the interface and the system that makes it work.

macOS 12+ · Apple Silicon · Free & open source

product-design.jsonlDESIGN
Nodetto design with web and mobile screens connected to an API and database
The interface. The service. The data.An example exported directly from Nodetto.

Web & app design

Database modeling

System architecture

DESIGN THE WHOLE PRODUCT

The screens people use.
The systems behind them.

Move between web layouts, mobile screens, database models, and architecture diagrams. Artboards, reusable components, and structured diagram shapes share the same canvas.

Web design · An editable desktop layout
01 / 07

Design the browser experience.

Build web layouts on artboards. Arrange content with auto layout and constraints, and reuse components across your design.

Download editable example
App design · Project list and detail screens
02 / 07

Shape the mobile experience.

Lay out app screens with iPhone, Android, and tablet artboards. Use platform-aware safe areas, components, and prototype links to explore a flow.

Download editable example
Shop database · Tables and a foreign key
03 / 07

Make relationships explicit.

Model tables and columns, connect foreign keys, and export a schema as SQL for PostgreSQL, MySQL, or SQLite.

Download editable example
Architecture · Web and mobile clients, API, jobs, and storage
04 / 07

Map the system behind the screens.

Connect clients, services, databases, and storage. Explain system boundaries and dependencies, then add UML or sequence diagrams where more detail is useful.

Download editable example
Billing model · Classes, inheritance, and composition
05 / 07

See how the pieces fit.

Describe classes, attributes, methods, and relationships. Give the structure of your system a shared visual language.

Download editable example
Checkout · Shopper, API, and database
06 / 07

Follow the conversation.

Map the messages between people, services, and databases. Make the order of operations easy to discuss.

Download editable example
Purchase request · An example process
07 / 07

Trace a process from start to finish.

Connect tasks, events, and gateways to describe a business process. Import and export BPMN XML when the diagram needs to travel.

Download editable example

AT HOME IN YOUR PROJECT

Draw visually.
Work with text, too.

The desktop app and bundled nodetto-cli work with the same JSONL document. Draw by hand, inspect a diagram from your terminal, or let an AI agent help with the next edit.

Read the CLI guide
nodetto-cli

Your diagram, from the terminal

$ nodetto-cli inspect shop.jsonl
document "Shop"
  page p1 "Schema" erd
    erd.table users
      column id uuid pk
      column email text
    erd.table orders
    erd.relation orders → users

$ nodetto-cli export shop.jsonl \
    --format svg --output shop.svg

The CLI is included with the Mac app. Homebrew links it for you.

01

Local files. No account.

Save diagrams on your Mac, alongside the rest of your project. The desktop app works without a cloud account.

02

Bring your own AI.

Give an agent a compact outline or JSON, apply structured edits, and render the result through the CLI. Use your existing tools.

03

Take the result with you.

Export SVG, PNG, or PDF for people; Mermaid, D2, or SQL for your workflow. Available formats depend on the diagram.

READY WHEN YOU ARE

Start designing
your next product.

Get Nodetto for macOS on Apple Silicon (M1 or later). Choose the DMG or install from your terminal.

Download the app

macOS 12+ · Apple Silicon

  1. Download the Apple Silicon .dmg from the latest GitHub release.
  2. Open the DMG and drag Nodetto.app into Applications.
  3. Launch Nodetto from Applications and start a diagram.
Download for Mac

Prefer the terminal?

Requires Homebrew
brew install --cask tacogips/tap/nodetto

Update an existing installation
brew update
brew upgrade --cask tacogips/tap/nodetto

Open a diagram

open -a Nodetto shop.jsonl
Installation details

A few things to know.

Is Nodetto free?

Yes. Nodetto is open source under the MIT license. The desktop app is free to download.

Which Macs are supported?

The published Mac build supports Apple Silicon (M1 or later) on macOS 12 Monterey or later. See GitHub for source builds.

Where do my diagrams live?

In local JSONL files on your Mac. Keep them with a project, put them in version control, and export them when you need to share.

Does it include an AI assistant?

The bundled CLI works with your own AI agent. There is no built-in model subscription or account required by the desktop app.

What about a cloud edition?

This page is for the desktop app. A cloud edition is planned separately; it is not available here yet.