Toolbox

Token architecture diagram

Generate the token architecture diagram from your DTCG files: 20 checks, Mermaid and SVG per mode and a CI gate against drift.

What it is

Field Guide 22: 20 checks for a three-layer token architecture diagram that is build output, not a slide. The kit is a zero-dependency Node generator that reads a DTCG 2025.10 resolver, refuses to draw when the files break the layering (9 errors on the broken fixture, codes D1 to D7) and writes Mermaid and a standalone SVG per mode, a layer view for leadership and the graph as JSON for agents. It ships the diagrams generated from Field Guide 03's tokens (25 core, 23 semantic, 11 component) and an annotated A3 poster.

When to use

When the architecture slide no longer matches the token files, before explaining the token layers to leadership or a new team, or when agents need the token structure as data.

How to use

Open the PDF or the interactive HTML and pick your reader on the start page
Run npm run diagram:check in the kit to see the committed diagrams match Field Guide 03's tokens
Run npm run demo:violations to see what the generator refuses to draw
Point the generator at your own tokens with --tokens and commit the diagram folder
Add node scripts/generate-diagram.mjs --check to CI next to your token checks

Before you start

Prerequisites and when to skip this.

Prerequisites

Token files in DTCG format with a tokens.resolver.json that lists your modes
Node 22 or later where the check runs

When NOT to use this

A token set without layers yet (start with Field Guide 03's rules)
A one-off conference slide nobody will maintain

Consider instead

You only need to explain the idea once, with no token files behind it: Use the annotated poster from the kit as it is

Downloads

Guide (PDF)Full kit (ZIP): PDF, HTML, Markdown, generator, diagrams, poster

Semantic token naming conventionToken layer rulesToken architecture that scales

The share link includes source tracking so LinkedIn traffic stays measurable in analytics.

Share on LinkedIn