Answers as diagrams, not walls of text

TakeSix lets an AI agent answer with a diagram you can click into. The gist fits on one screen of six blocks at most; every block opens into its own screen, and the long text waits in a side panel.

Claude Codeclaude mcp add takesix -- npx -y @takesix/mcp
Codexcodex mcp add takesix -- npx -y @takesix/mcp

Read the format

Open source under MIT: format, libraries, skill and MCP server.

Explain how our checkout works

Sure! I'll walk through the checkout flow end to end, from the moment the customer presses Pay to the nightly settlement. Here's a detailed breakdown.

Overview

The checkout spans six services. The web shop calls the Checkout API, which validates the cart, creates an order in the pending state and hands it to Payments. Order events are published on the bus and consumed by Notifications and Settlement.

1. Cart service

Keeps line items per session in cart_items
Applies discounts in a fixed order:
- item-level promotions first
- then cart-level coupons
- then loyalty points (capped at 30%)
Prices are cached for 10 minutes; a stale price forces a refresh before the order is created

2. Checkout API

The main entry point. On every request it:

Validates the cart against current prices and stock
Reserves stock for 15 minutes
Creates the order with an idempotency key from the Idempotency-Key header
Calls the payment service and waits for the charge result

POST /v1/checkout
{
  "cartId": "c_8f2a",
  "paymentMethod": "card",
  "shippingAddressId": "a_19"
}

3. Payments

Payments wraps the provider (PSP) behind an adapter, so switching providers touches one module. Key points:

Charges: one per order, created with the order total and currency
3-D Secure: redirects come back through /payments/callback
Retries: twice with exponential backoff (2 s, 8 s), then the order moves to failed
Refunds: create a credit note and never edit the original charge

4. Orders

Orders follow a strict state machine:

State	Next	Event
pending	paid, failed	order.created
paid	packed, refunded	order.paid
packed	shipped	order.packed
shipped	delivered	order.shipped

Every transition emits an event on the bus. ⚠️ Transitions are not reversible: a cancelled shipment creates a new return order instead.

5. Notifications

Listens to order.* events
Sends transactional emails through the mail provider, with templates per locale
Calls partner webhooks with an HMAC-SHA256 signature in X-Signature
Failed webhooks are retried for 24 hours, then parked in a dead-letter queue

6. Settlement

A nightly job at 02:00 UTC reconciles provider payouts with paid orders:

Downloads the payout report from the PSP
Matches each line to a charge by reference
Reports mismatches to finance as a CSV

Key takeaways

The Checkout API is the only synchronous path; everything after payment is event-driven
Payments is isolated behind an adapter
Orders are append-only: corrections create new documents
Settlement is the safety net for anything the events missed

Let me know if you'd like me to dig deeper into any of these, for example the retry policy or the webhook signature!

CartItems, discounts, totals3 more inside
Checkout APICreates the order4 more inside
PaymentsCharges via the provider5 more inside
OrdersPending to shipped4 more inside
NotificationsEmails and webhooks2 more inside
SettlementNightly reconciliation3 more inside

Same answer, one screen at a time.

Live TakeSix diagram

Edit it in the editor

TakeSix, explained by itself

Click any block to open it. Every screen shows six blocks at most; longer text waits in the side panel

◆

The idea

An agent answers with a diagram you can click into, not pages of prose. Click Me! I have more inside

🤖

For agents

A skill and an MCP server

{ }

The format

Plain JSON: blocks, children, links

▣

For apps

Viewer and editor for React

○

Open source

MIT licensed: format, libraries, skill and MCP server. Next: integrations

TakeSix, explained by itself

Click any block to open it. Every screen shows six blocks at most; longer text waits in the side panel

The idea: An agent answers with a diagram you can click into, not pages of prose. Click Me! I have more inside
Ask an agent to explain a codebase, a spec or a plan and you usually get many screens of headings and bullet lists. TakeSix turns that answer into a tree: the whole thing fits on the first screen, and each part opens into its own screen.
- Six at most: A screen you can take in at a glance
  Six is a hard limit, checked by the validator. When there are more things to show, they are grouped into a parent that names what they share. That grouping is the explanation.
- Depth on demand: The gist first, details one click away
  Cards show a title and one line. Click to open a block, use the breadcrumb to go back. Long explanations, code and lists live in a Markdown side panel.
- Checked, not guessed: A JSON format with a schema an agent can validate against
  Errors come with JSON paths (`/blocks/2/children: 7 blocks on one level`), so the agent fixes its own answer before you see it.
For agents: A skill and an MCP server
Both teach the agent the same rules for readable diagrams, check the result and render it.
- MCP server: @takesix/mcp for any MCP client
``` claude mcp add takesix -- npx -y @takesix/mcp codex mcp add takesix -- npx -y @takesix/mcp ``` Tools: `guide` (the rules), `validate`, `show` (writes one HTML file). Runs locally over stdio.
- In the conversation: MCP Apps hosts show the diagram inline
  In clients that support MCP Apps, such as Claude Desktop, `show` opens the diagram right in the chat, with a full screen button. Elsewhere you get a self-contained HTML file.
- Agent Skill: For Claude: rules plus a validate and render script
  Copy `skill/takesix` from the takesix-agent repository into `~/.claude/skills/`. It needs only Node.js: the script and the viewer are bundled.
The format: Plain JSON: blocks, children, links
```json { "takesix": "1.0", "title": "Payments", "blocks": [ { "id": "api", "title": "API", "size": "S" }, { "id": "bank", "title": "Bank" } ], "links": [{ "from": "api", "to": "bank" }] } ``` Full specification: [FORMAT.md](https://github.com/vvapnik/takesix-core/blob/main/FORMAT.md)
- Block: id, title, one-line description, up to six children
  Optional fields: `icon`, `size`, `details` (Markdown for the side panel) and `meta` for data of other tools. Ids are stable, so links and comments can rely on them.
- Size: S, M, L or F on a six-column grid
  - **S** a third of the width - **M** a half (default) - **L** two thirds - **F** the full width Blocks flow left to right and wrap. Plans use F, so each step is a row.
- Link: Between any two blocks, on any levels
  `from`, `to`, an optional `label` and `direction`. A link between nested blocks also shows one level up, as an arrow between their parents.
For apps: Viewer and editor for React
``` npm install @takesix/react ```
- @takesix/react: One component: view, or edit with onChange
```tsx import { TakeSix } from '@takesix/react' import '@takesix/react/style.css' <TakeSix document={doc} onChange={setDoc} editing /> ``` Light and dark themes, drag and drop, grouping, phones. This page uses it.
- @takesix/core: Parse, validate, edit; no dependencies
  Everything about the document without UI: `parseDocument`, `validateDocument`, immutable edits, and `visibleLinks` for drawing arrows on a level.
Open source: MIT licensed: format, libraries, skill and MCP server. Next: integrations
- Repositories: core, react, agent, and this site
  - [takesix-core](https://github.com/vvapnik/takesix-core) - [takesix-react](https://github.com/vvapnik/takesix-react) - [takesix-agent](https://github.com/vvapnik/takesix-agent) - [takesix](https://github.com/vvapnik/takesix)
- Coming next: Confluence and other integrations, export, embedding
  - Plugins: Confluence first, then Notion, GitHub, VS Code, Obsidian - Embedding with an `<iframe>` or a `<take-six>` web component - Converters from C4, Mermaid, OpenAPI - Presentation mode and PNG/SVG export