Skip to content
chiltepin

v0.47.10 · typed blocks, one grammar · MIT

Diagrams and docs,
written with your agent.

Turn Markdown and typed YAML into architecture diagrams, API docs, and slides. Your agent writes the content; chiltepin check validates its structure, and Chiltepin handles the layout.

npx skills add jdiejim/chiltepin -y
install the skillask in plain wordstyped YAMLchiltepin checknpx chiltepin studiorendered page16 s, real output

Example output

See a complete document.

Follow an orders system from its context diagram to the services, API internals, and request flow, all in one document.

Explore the demo

Read the full document or open it as slides.

DOCUMENTOVERVIEW

Orders system overview

How the orders system fits together — context, landscape, one module, one flow.

Context

SECTION 01 · C4 model

The orders system in its world

C4 · CONTEXT
C4 diagram: 4 elements, 3 relationshipsPERSONShopperSYSTEMOrders systemEXTPaymentsEXTShippingplaces orderschargesnotifies
LegendPERSONpersonSYSTEMsoftware systemEXTexternal systemoutside the boundaryusesthe system in scope

Landscape

SECTION 02 · Architecture

Services and backbone

ARCH
Layered architecture: 2 layers, 4 nodesORDERS PLATFORMAppsBackboneStorefrontNext.jsCLIENTOrders APIFargateSVCEvent busmanagedQUEUEorders-dbPostgresDB
LegendCLIENTclientSVCserviceQUEUEqueueDBdatabasecalls

One module — the API internals

SECTION 03 · Frontend logic

Orders API — the request chain

LOGIC
Module graphorders/apiEgressCONTROLLERcreateOrderPOST /ordersSERVICEOrderServicevalidate + placeREPOSITORYOrderRepopersistGATEWAYPaymentGatewaychargeorders-dbPostgresDBPaymentsthird-partyEXT12345
1calls2saves3charges4SQL5HTTPS
LegendCONTROLLERcontroller / routeSERVICEservice / use caseREPOSITORYrepositoryGATEWAYgatewayDBdatabaseEXTexternalcontract / externalpassive (state, middleware, store)usesnetwork callentry point

One flow

SECTION 04 · Sequence
SEQUENCE
Sequence diagram: 4 messages between 3 actorsClientOrders APIPayments1POST /orders2charge3ok4201 Created
Legendcallresponsethe answer the caller getsactive
Orders system overviewScroll to read all four diagrams, or open the full demo.

What it does

A growing library of typed blocks, one grammar.

Diagrams, tables, API and event contracts, roadmaps, threat models, decision records, audits, charts. All of them are fenced YAML inside ordinary Markdown, and all of them are validated the same way.

  • Validation

    A diagram can be wrong, and CI can say so

    Every block is checked against a strict schema. chiltepin check catches a bad field, a duplicate id, a dangling cross-reference or a non-UTF-8 file, names the line, and exits non-zero. A geometry script can only tell you a drawing rendered; only a schema can tell you the content is wrong.

    How blocks work →
  • Cloud

    Traces, sagas, event contracts, rollouts

    A distributed-trace waterfall that marks the critical path. A saga with its compensating steps and the step that failed. The asynchronous counterpart to an HTTP endpoint card. A progressive-delivery strip with traffic percentages and gates. Architecture blocks nest region inside zone inside subnet, and draw replicas as stacked cards.

    See them rendered →
  • Sequence

    Real UML combined fragments

    alt, else, opt, loop, par, break and critical draw as proper frames with a tab and a guard, nested where the data nests. Activation bars open on a call and close on its reply, self-messages loop, and notes sit beside one lifeline or across two.

    Sequence diagrams →
  • Data model

    A relational model, not a box-and-line sketch

    Columns carry unique, nullable, default, indexed, enum values and foreign-key targets. Relations carry identifying versus non-identifying and optional cardinality. Schemas draw as panels, enums as cards, and the layout ranks entities by adjacency so the aggregate root lands in the middle. Nothing is truncated — cards grow.

    ER diagrams →
  • Quality

    Audits, checklists, budgets, threat models

    A findings register ranked by severity with the evidence and the fix. A checklist whose pass rate is derived, not typed. Performance budgets with the over / near / ok verdict computed, p50 to p99 per endpoint against the SLO rule, and a STRIDE threat model drawn on the data flow inside its trust boundaries.

    Threat models →
  • Agent skill

    One command, seventy agents

    Run npx skills add jdiejim/chiltepin -y in your project to install the authoring skill. Your agent can look up block schemas, write Markdown, and run chiltepin check through npx.

    Set up your agent →
  • Present

    Decks that build as you talk

    Any document is a deck — one slide per heading. A diagram with a natural order reveals one item at a time as you advance, the current step taking the accent. Nothing is hidden by the markup: without JavaScript, in print, and on the page, the diagram is whole.

    Slides & decks →
  • Accessibility

    Enforced in CI, not claimed in a footer

    Every text element passes WCAG AA against whatever is painted behind it, and every line that carries meaning — a node outline, an arrow, a state border — passes the 3:1 non-text threshold. A script measures it on the built page. Each diagram also announces itself with a title built from its own content, not a generic “Sequence diagram”.

    Read the docs →

chiltepin studio

Write in Markdown or edit visually.

Right-click any part of a diagram to edit it. Press D and draw a rough shape to get the right node, or a line between two nodes to connect them. Every gesture is written back as ordinary YAML in the .md file — nothing stores pixel coordinates, so the next commit is still a readable diff.

▶ PresentSite ↗
SECTION 01 · Overview

Checkout

The happy path: authorize on order placement, capture on fulfilment.

sequence · selected
SECTION 01 · Sequence

Place an order

SEQUENCE·POST/orders
Sequence diagram: /orders, 3 messages between 3 actorsClientOrders APIPostgres1POST /orders2INSERT order3201 Created
Legendcallresponsethe answer the caller getsactive

chiltepin studio — click a block to select it, edit it as a form or as YAML, and watch the preview update. The document above is real rendered output, not a screenshot.

Try Studio demo

Nothing is uploaded. Demo documents are cleared when you reload or close the tab.