Nedito

Every architecture diagram hits the same wall. You start with five boxes, someone asks what is inside the payment service, and you either cram it all in or split it into files nobody opens.

Nedito takes a third option. Any box can be a Nested Block: in its parent it shows a live miniature of what is inside it, and opening it zooms into that diagram as a full canvas, with a breadcrumb to climb back out — as many levels deep as the subject needs. Around that, it is the diagram editor you would expect: shapes, lines, pages, layers, templates, and the official Azure, AWS and Google Cloud icons.

Nedito was built around one idea, nested diagrams, and one commitment: your diagrams are yours. No sign-up, no account, no password to hand over. Whether you draw at nedito.app or on your own copy, the diagram never leaves your machine unless you send it somewhere yourself.

See it

Open a box, look inside, climb back out. The miniature on each Nested Block is drawn from what is really inside it, so it never goes stale. Lines that cross the boundary arrive inside as ghost links, named after where they come from.

Diagrams that move. Lines can carry flowing traffic, packets or throughput, and shapes can pulse or show their health. Motion is saved with the diagram, every kind has a still form for print, and the Animated image export turns a level into a GIF — this one was made by it:

Tidy up. One command lays a level out along its connections — or every level below it, in one step, which is the part that is tedious by hand once a document nests. Shapes that are connected to something move; a title or a legend stays where you put it. Groups keep their members, and a line arriving at a Nested Block's left side puts the shape feeding it on the left.

What it does

Nesting	Nested Blocks with live miniatures, ports that carry lines inside, ghost links, breadcrumbs, unlimited depth. Turn any selection into a Nested Block, trace what a shape touches across every level, and tidy up every level below in one step.
Editing	Shapes, curved, straight and orthogonal lines with waypoints, labels with rich text, groups, layers, pages, find and replace, alignment, snapping, a Tidy up that lays a level out along its connections, undo across levels, and a command palette (Ctrl+K).
Library	18 sections — flowchart, BPMN, UML, C4, entity relation, data flow, network and more — plus the official Azure, AWS and Google Cloud architecture icons, and animated icons.
Templates	38 ready-made diagrams, from flowcharts and C4 models to cloud landing zones, several of them nested.
Motion	Flow, packets and throughput on lines; pulse and health on shapes; and Build, Walkthrough and Spotlight presentation modes.
Export	PNG, an editable PNG that reopens as the diagram, SVG, PDF, print, PowerPoint (each Nested Block a Slide Zoom), Word, and animated GIF.
Share	A link that opens the diagram read-only, and a copied image that opens the full diagram when clicked.
Import	.nedito files, editable PNGs, Word exports, and draw.io files as a best-effort import that says what it could not carry across.

Your diagrams are yours

• No sign-up, no account, no credentials. Open the app and draw. There is nothing to register and nothing to log in to.
• Nothing is uploaded. nedito.app serves the app's own files and nothing else, and it never receives a diagram. The one you are working on is kept in this browser's storage, saved as you go. The app's own code contains no analytics, trackers or telemetry.*
• Sharing happens only when you choose. An export is a file you put where you like. A share link carries the whole diagram inside the link, in the part after #, which browsers never send to a server.
• Online or on your own machine: the same app. Use it at nedito.app, or run your own copy from this repository (see Running it locally). A local copy has no connection to nedito.app at all.

The flip side: nobody else holds a copy. Clearing this browser's data, or switching browser or machine, leaves your work behind, and it cannot be recovered for you. Download your file (app menu › Save a copy, or Export) to keep it, move it or share it.

* nedito.app, the hosted copy, uses Cloudflare Web Analytics to count visitors, page views and how quickly pages load, and Cloudflare's hosting reports on requests, throughput and failed requests, so the site can be kept fast and working. None of it touches your diagrams or what you type: the analytics script removes everything after # from the page address before reporting it, so a share link's diagram is never sent, and it uses no cookies. A copy you run yourself has none of this.

The file format

A Nedito document is a single readable JSON file with the .nedito extension. Its first two keys say what it is — "format": "nedito" and "formatVersion" — and its keys are written in a stable order, so documents diff cleanly in Git. Nesting is by reference: a document is a flat map of diagrams, and a Nested Block names the diagram it holds. The schema, version by version, is in docs/FORMAT.md.

Every older version still opens, migrated on load (src/file/migrations/), and so do files from before the product was renamed from DeepDraw: the .deepdraw extension and its editable .deepdraw.png images (LEGACY_BRANDS in src/app/brand.ts).

How a document is put together

A document is a flat map of diagrams, and nesting is by reference: a Nested Block names the diagram it holds, rather than containing it. That keeps every level a full diagram of its own, opened on its own canvas, however deep it sits.

interface DiagramDocument {
  formatVersion: number;
  meta: { title: string; created: string; modified: string; appVersion: string };
  rootDiagramIds: string[];             // one per page
  diagrams: Record<string, Diagram>;    // every diagram, on every level, by id
}

interface Diagram { id: string; title: string; nodes: DNode[]; edges: DEdge[] }

type DNode = ShapeNode | NestedNode | GroupNode;   // each with id, position, size, z, style, label

interface NestedNode {
  type: "nested";
  childDiagramId: string;               // the diagram this block opens into
  collapsed: { icons: string[]; summary?: string };
  ports: Port[];
}

interface Port {
  side: "top" | "right" | "bottom" | "left";
  offset: number;                       // 0..1 along that side
  innerNodeId?: string;                 // the shape inside it leads to; unset while waiting
}

interface DEdge { source: EdgeEnd; target: EdgeEnd; waypoints?: { x: number; y: number }[]; style: StyleMap }

The full model, with layers, images, page settings and motion, is in src/model/types.ts and documented version by version in docs/FORMAT.md.

What always holds. Every document is checked against these whenever it is read — opening a file, restoring the autosave, importing (src/model/validate.ts) — and a file that breaks one is refused with a clear message rather than loaded half-broken:

• every Nested Block's childDiagramId names a diagram in the document, and no diagram contains itself, directly or further down;
• a line that reaches a Nested Block attaches to one of its ports, and a port's innerNodeId, when set, names a shape inside that block's diagram. A port with no innerNodeId is waiting to be linked, shown inside the block as an amber ghost, never silently dropped;
• every id — diagrams, shapes, lines, ports, images — is unique across the whole document.

Changes keep them true. Deleting a shape that a port leads to asks whether to keep the link waiting or remove it; deleting a Nested Block that holds shapes asks whether to delete what is inside or lift it onto the current level. Every change is a named action in the store, one undo step each, and undo works across levels: undoing something made on another level takes you there. Only the level being viewed is drawn, so depth costs nothing.

Running it locally

This is also the way to have Nedito entirely on your own machine: the same app as nedito.app, served from your computer, with no connection to anything else. You need Node.js and npm. Commands work in PowerShell as written; the project is developed on Windows.

npm install
npm run build        # the app, as static files in dist/
npm run preview      # serves them at http://localhost:4173

For working on Nedito itself, npm run dev runs it with hot reload at http://localhost:5173.

Task	Command
Unit tests (Vitest)	npm run test (or npm run test:watch)
End-to-end tests (Playwright)	npm run test:e2e — the first time, install the browser with npx playwright install chromium
Run one balanced part of the end-to-end suite, as CI does	node scripts/e2e-shard.mjs <part> 4 (--plan 4 shows the split)
Lint (ESLint)	npm run lint
Type check	npx tsc -b
Production build	npm run build, then npm run preview to serve dist/
Format (Prettier)	npm run format
Regenerate the PNG app icons from their SVG	npm run icons
Measure pan and zoom frame times	npm run perf (see the header of scripts/perf-pan.mjs)
Regenerate the README's pictures	npm run readme-images, with npm run dev running
Regenerate the repository's social preview image	npm run social-preview, with npm run dev running (see docs/social-preview/)
Back up the maintainer's local working notes to their private repository	npm run notes:backup (see below)

Git hooks. The repository keeps its hooks in .githooks/, which a clone does not use until you point Git at it — once per clone:

git config core.hooksPath .githooks

Its one hook, post-merge, runs npm run notes:backup whenever a pull or merge brings new commits into main. That backs up the maintainer's local working notes, which are not part of this repository, to a private one; the clone is found through the NEDITO_NOTES_REPO environment variable, or a nedito-notes folder beside the project. In a clone without those notes it does nothing, and it never blocks or undoes a merge.

Built with React 18, TypeScript, Vite, React Flow and Zustand. The production build is static files, served from a Cloudflare Worker (wrangler.jsonc).

src/
  app/            the shell: top bar, app menu, command palette, dialogs, brand, breadcrumbs
  canvas/         React Flow setup, custom shapes and lines, interactions, motion and presentation
  context-bar/    the floating bar over a selection, and its popovers
  format-panel/   the formatting controls those popovers and the Page popover show
  nesting/        Nested Blocks: ports, ghost links, navigation, trace, convert to nested
  library/        the shape library sidebar, its lazily loaded stencil sections, search
  model/          document types, validation, the store and its actions, undo
  file/           the .nedito format and migrations, PNG/SVG/PDF/GIF export, autosave, draw.io import
  export/         PowerPoint and Word export
  share/          share links, the read-only viewer, copy image with live link
  onboarding/     the first visit, the tour, the export reminder
  templates/      the template catalogue
  styles/         design tokens, global styles, motion
tests/e2e/        Playwright tests; unit tests sit next to the code they test
docs/             the file format, the About copy, audits, and the README's pictures
examples/         worked example documents, rebuilt and checked by tests
scripts/          icon generation, the performance measurement, the end-to-end split, the pictures
public/           the app icons (the typeface comes from npm, @fontsource)
licenses/         the full text of third-party licences NOTICE refers to

Contributing

Bug reports, ideas and pull requests are welcome — CONTRIBUTING.md has the details, and everyone taking part follows the Code of Conduct. For a bug, say what you did, what you expected and what happened, and attach the diagram if it matters: export it yourself, because nothing in the app sends us your work.

main is protected and always working. Each change is its own short-lived branch off main:

1. Branch (feat/…, fix/…, docs/…).
2. Before opening a pull request, run the fast checks and get them green — npm run test, npm run lint, npx tsc -b, npm run build — plus the end-to-end tests for the area you changed (npx playwright test tests/e2e/<spec>).
3. Open the pull request with what changed and how you checked it.
4. One pull request open at a time: the next branch starts after the last one merges.

Every pull request runs the full sweep in GitHub Actions (.github/workflows/ci.yml), the end-to-end tests split across six machines, and must be up to date with main and green before it merges. Commits use conventional messages (feat(canvas): …), and new dependencies need a stated reason.

CONTRIBUTING.md has the rules review holds every change to.

Security

Please report a security problem privately, as SECURITY.md describes, not in a public issue.

Where the shapes come from

Every shape in the library is one of two things, and the source of each section is recorded in NOTICE:

• drawn for Nedito: the general shapes, flowchart, UML, entity relation, data flow, C4 and the rest are original SVG, following the published notations (ISO 5807, UML, Chen) rather than any other product's artwork;
• taken from an official or openly licensed set: the Azure, AWS and Google Cloud architecture icons, from each vendor's own published icon package under its usage terms, and Google's Material Symbols under the Apache License 2.0.

Nothing else goes in. Icons, stencils and templates are never taken from other diagram tools' libraries, in any form — copied, converted or traced — because those carry their own terms and chains of third-party copyright that an open-source project cannot pass on. A new icon set comes from its owner's official release or an open licence, with its source and terms added to NOTICE.

Licence and attribution

Nedito is open source under the Apache License 2.0 — see LICENSE.

It ships third-party assets, each under its own terms, listed with their sources in NOTICE:

What	Used for	Terms
Microsoft Azure architecture icons	The Azure section of the shape library	Microsoft's icon terms: architecture diagrams, training and documentation
AWS architecture icons	The AWS section	AWS Architecture Icons guidelines
Google Cloud icons	The Google Cloud section	Google Cloud's icon usage guidelines
Google Material Symbols	Icons in the General, Misc, Arrows, Network and Business sections	Apache License 2.0
IBM Plex Sans and Mono	The interface typeface, embedded in SVG exports	SIL Open Font License 1.1 (full text)

The vendor icons and trademarks belong to their owners, and Nedito is not affiliated with them. draw.io is a trademark of its owner, named here only to say which files Nedito can import.

---