Skip to content
{% blueprint %}
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

{% blueprint %}

Attributes

Parameter Type Required Description
id string Unqualified blueprint id (e.g., 'system')
type enum infrastructure | architecture | module | plan
implements string Space-separated qualified feature ids this blueprint realises (e.g., 'feature/add-bookmark')
scope string Space-separated list of visibility scopes

Valid Children

TagMultiplicity
{% tldr %}[1]
{% explanation %}[*]
{% approach %}[1]
{% component %}[*]
{% rule %}[*]
{% link %}[*]
{% diagram %}[*]
{% example %}[*]

Rules

Rule Force Realm Reference Description
no-direct-db must global manifest/product#response-time No component above the repository layer may access the database directly.

The blueprint tag is the root container of a .blueprint.mdoc file. It captures how a feature or system concern is implemented: the chosen approach, component topology, wiring, and implementation rules. Two archetypes exist: a feature blueprint (implements names one or more features) and a system-wide blueprint (implements omitted).

Blueprint with approach, components, rules, and links
tagblueprintcomponentrule blueprint-tag-architecture
{% blueprint id="system" type="architecture" implements="feature/add-bookmark" scope="public agent" %}
{% approach label="Layered service stack" %}
We use a strict layered approach: controllers delegate to services,
services delegate to repositories.
{% /approach %}
{% component id="BookmarkService" layer="service" tech="Node.js" %}
Orchestrates the add-bookmark flow.
{% uses ref="BookmarkRepository" %}Persists bookmark records.{% /uses %}
{% /component %}
{% rule id="no-direct-db" force="must" ref="manifest/product#response-time" %}
No component above the repository layer may access the database directly.
{% /rule %}
{% link ref="feature/add-bookmark" %}Related feature spec{% /link %}
{% link url="https://github.com/org/repo" %}Source code{% /link %}
{% diagram id="bookmark-layers" label="Bookmark Layer Diagram" type="class" %}
classDiagram
BookmarkController --> BookmarkService
BookmarkService --> BookmarkRepository
{% /diagram %}
{% /blueprint %}

Tag Tree

{% tldr %}[1]One-sentence summary rendered as a lead paragraph and used as the document's short description throughout the site.{% explanation %}[*]Provides targeted advice or collapsible detail for a specific audience. Renders as a callout () or a disclosure element (). Supports full Markdown in the body.{% approach %}[1]Documents the selected technical approach for a blueprint, with reasoning in the prose body.{% component %}[*]Names an architectural component in a blueprint, with its layer, technology, and wiring to other components.{% uses %}[*]Wires a dependency between two architectural components in a blueprint.{% implements %}[*]Links an architectural component to an action it handles.{% emits %}[*]Links an architectural component to an event it produces.{% listens %}[*]Links an architectural component to an event it consumes.{% example %}[*]Embeds a named, filterable example inline in a document and collects it in the global Examples Gallery.{% rule %}[*]Declares a named convention or constraint in a blueprint, domain, or manifest — optionally traced to a motivating spec item.{% link %}[*]{% diagram %}[*]Embeds an interactive Mermaid diagram inline in a document and collects it in the global Diagram Gallery.{% example %}[*]Embeds a named, filterable example inline in a document and collects it in the global Examples Gallery.