راقب اتجاهات التقنية العالمية، وجمع موارد المطورين

Introduction

A system diagram tends to have three versions.

The first is the messy one, where the actual thinking happens. The second is the tidy one that goes into a design document. The third is the one pasted into slides when it’s time to explain it.

Then someone adds a service, changes a dependency or asks, “What happens inside that box?” And the three versions start drifting apart.

I wanted to build a different kind of canvas: one where a rough idea could become a clear architecture diagram, grow without constant rearranging, and eventually tell its own story — without being flattened into a screenshot along the way.

That’s why I built Drawtide and Explore the animated Guide

Draw while you’re still figuring it out

Early architecture discussions are not supposed to look finished.

Maybe your first version is just Web → API → Orders. Add a shape with Tab, give it a name, and Drawtide links it to the previous one. Branch below with Shift+Tab. Move a service and its connectors follow. Put a frame around a set of services when they become a meaningful boundary.

Use Hand-drawn while the design is open to discussion. Switch to Clean when you want the same board to look ready for a document. The elements and relationships stay where they are; the presentation changes, not the design.

That’s the feeling I wanted : freedom to think, without throwing away the structure later.

Already have Mermaid? Keep going from there

A lot of architecture already exists as Mermaid in READMEs, design documents and wikis. Starting from scratch would be wasteful.

Drawtide can import Mermaid into a native diagram. Open its Script panel to see the text beside the drawing; edit the script, or work with the shapes on the canvas. The goal is not merely to render a picture of your code — it’s to make that existing diagram part of a living board.

When the architecture changes, make room — not a mess

Here’s the moment that usually costs me the most time: I need to add one processing step between two existing services.

In many diagram tools, that means moving everything to the right, repairing spacing, and checking whether the connectors still line up.

In Drawtide, drop the new shape onto an existing link. It can join the flow, with surrounding shapes moving to make room. For a messy region, select it and use Tidy to preview a cleaner arrangement before applying it. The rest of the board can stay put.

Press enter or click to view image in full size

A good canvas should absorb changes. Architecture diagrams, after all, are rarely finished.

Turn recurring architecture patterns into parts

Services tend to repeat a visual language: a name, an icon, a status, maybe a small badge. I don’t want to rebuild that language for each service.

With TideParts, select a set of shapes and make a reusable component. Place copies elsewhere and customize the values that should differ — like the service name or its status. The component stays a native, editable element rather than a pasted image.

Components also have a path beyond one board: My components keeps personal parts available, and .dtpack files can carry packs between devices or people.

Give complex systems depth without overcrowding the overview

A diagram of a platform should tell you what the parts are and how they relate. It shouldn’t have to show every internal retry, branch and database query on the same sheet.

With TideLens, a shape can open into its own detail view. The top-level architecture stays readable; the Payments service can have its own payment-flow diagram behind it. Breadcrumbs lead back to the overview. Each view keeps its own editing space and undo history.

For architecture reviews and onboarding, that changes the conversation. You can start at “here’s the system” and go deeper only when somebody asks.

Present the actual diagram, not a disconnected copy

The last transformation is usually the most frustrating: turning your diagram into slides, then keeping those slides current.

TideScenes takes a different approach. A scene points to the part of the existing board you want to explain. Add a title, caption and optional speaker notes; then present from the board, moving smoothly between scenes.

If the underlying shape moves or changes color, you aren’t editing a separate screenshot. You are still presenting the board itself.

Local-first, with a clear trade-off

For this beta, Drawtide boards are stored in your browser, on your device. Signing in with Google or GitHub creates your Drawtide account; it does not upload your diagrams or make them appear on another device.

You can explore the unsaved demo without signing in. To create new boards, sign in. To keep your work portable, export individual .drawtide files or use Download all boards for a backup. Clearing your browser's site data can remove locally stored boards, so backups matter.

There are no cloud board links or real-time shared editing in this release. I’d rather be precise about what works today than imply it already does more.

Built as an editor, not as a collection of screenshots

Under the hood, Drawtide uses its own document model and interaction engine, with native shapes, connectors, layouts, nested views, components and presentation scenes. This matters because those features need to understand each other: when you move a service, the connection should still be a connection; when you present a view, it should still be the same view.

I’m also working on the next layer — collaboration and MCP-based diagram operations — so an authorized assistant can eventually work with real editable diagram objects, not just generate a static image. Those capabilities are not part of the public-beta promise yet.

What I’d love you to try

The public beta is an invitation to test Drawtide with something real.

Try sketching a service architecture. Add a new dependency halfway through. Move a connected node. Turn one service into a reusable component. Open a detail view. Present the result.

If a moment feels confusing, or something doesn’t behave the way you expect, please tell me through Report an issue or Share feedback in the app. That feedback is as valuable as a perfect-looking demo.

Try Drawtide
Explore the animated Guide