Architecture
AI system architecture diagram
A Sketvio architecture is four bands from left to right: Clients, App, Services, Data. Boxes inside a band are the same size. Edges have no captions — the layers already say which way the request travels.
Written from the Sketvio compilers at Rajosa Tech. Reviewed 20 September 2026.
When to use Architecture
Use Architecture when the question is “what talks to what in production?” A founder explaining the stack, an engineer aligning a weekend build, a teacher showing where auth sits. You want technology names, not user stories.
Skip Architecture if you are mapping people to features (Diagram) or a user’s click path (Flowchart). Those types will not give you Clients / App / Services / Data bands.
How generate actually works
Describe the stack in layers, not user stories. The model fills 8–12 short technology labels. The compiler always emits four bands and equal box sizes, then routes edges left to right.
Clerk and any other auth stay inside App. An AI vendor sits in Data with an orange stroke. Those rules survived several reviews where a fifth “Auth” column or a caption on every arrow made the board unreadable.
Architecture reuses the same band layout as Diagram, with different tones and a hard four-layer normalize. If a box is missing after generate, draw it. Do not ask the model to invent a fifth lane.
What lands on the board
Exactly four layers
Clients are sky. App and Services are indigo. Data is emerald. An external vendor — an AI gateway, a push provider — sits in Data with an orange stroke so it does not look like your database.
Auth stays in App
Clerk, NextAuth, or “session service” is a node inside App. It is not a fifth column. We tried a separate Auth band. It made every arrow longer and hid the services.
Unlabeled edges on purpose
HTTPS, gRPC, and “reads” on every line turn the board into a caption list. The draft leaves edges silent. If one hop is unusual, write the word yourself after generate.
HabitFlow as a stack
Paste this on a board after you pick Architecture.
Architecture for HabitFlow: iOS and a web dashboard talk to Next.js. Clerk sits in the app. Habit API and a streak engine sit in services. Postgres and SumoPod sit in data.
- Clients: Mobile app, Web dashboard
- App: Next.js, Clerk auth (amber)
- Services: Habit API, Streak engine
- Data: Postgres (emerald), AI provider (orange)
- Edges from clients through Next.js into services and data — no captions
After the draft
- Rename Next.js if the real app is Rails or a mobile BFF.
- Move Clerk only inside App. Do not invent a fifth band.
- Draw one labeled arrow if a hop is not left-to-right.
- Export when the slide needs a file. Keep the board as the working copy.
Mistakes that waste a generate
- Do not write user stories into Architecture. “Maya marks a habit” belongs on Flowchart or Mobile UI.
- Do not add a fifth lane in the prompt. The normalize step will throw it away.
- Do not expect every arrow to say HTTPS. Label the one hop that is unusual, by hand.
Related tools
Questions about Architecture
How is this different from Diagram?
Diagram is People / App / Data with a few labeled relationships. Architecture is Clients / App / Services / Data with technology names and silent arrows. Same canvas. Different compiler.
Why are the boxes the same size?
Unequal boxes make “Insights” look more important than “API” because the label was longer. The compiler uses one width so the layer — not the string length — carries the weight.
Can I put the AI model in Services?
The draft parks vendors in Data (orange). You can drag the box after. We keep the default so a hosted model does not look like code you deploy.
Open a board and try Architecture.
Three starter boards. No card. The draft is editable the moment it lands.
Start free