Views

A view shows part of the model. You write each node once, and views choose which ones appear. This is what keeps a large system maintainable: a picture for newcomers, a picture for the platform team, a picture for one flow, all from the same file.

Without a views: block there is one view that shows everything. Add views to offer more.

OverviewBackend only

The same model with the edge layer and the browser left out.

Data accessPersistent channel (websocket, gRPC)Queue / brokerDashed: planned

Loading diagram…

Keycloak

OIDC · realm shop

catalog-service

:4001 · Node.js

products

prices

search

uses: redis · postgres

cart-service

:4002 · Go

session carts

uses: redis

order-service

:4003 · .NET

creates and tracks orders

talks to the payment provider

uses: postgres · rabbitmq

notification-worker

email and push

planned

Redis

catalog cache · carts

PostgreSQL

orders · products

RabbitMQ

order.events

Stripe

payment provider

The tabs above the diagram switch views. This diagram has two:

views:
  overview:
    title: Overview
    keys: true
    interfaces: true
    summary: Everything in one picture. Letters on the edges match the interfaces table underneath.
  backend:
    title: Backend only
    include: [backend, stripe]
    direction: DOWN
    summary: The same model with the edge layer and the browser left out.

Fields

Field	Meaning
title	The tab’s label. Defaults to the id.
summary	Markdown shown above the diagram.
include	all (the default) or a list of node and group ids. A group includes its members.
exclude	Ids to remove after include.
direction	AUTO (default), RIGHT, DOWN, LEFT or UP.
keys	Put letters (A, B, C …) on edges.
interfaces	Show the interfaces table under the diagram.

Edges are included when both of their ends are in the view. The first view in the file is the one shown first.

Choosing what a view includes

views:
  billing:
    title: Billing
    include: [orders, payments-group]   # nodes and groups, by id
    exclude: [metrics]                  # leave one out

Use groups to keep the list short. If you rename a node or a group, docspp check points at every include or exclude that no longer matches: "x" is not a node or group.

Direction

direction sets the main reading direction of the picture. AUTO tries left to right and top to bottom and keeps the one that reads larger. Force DOWN when the diagram will sit in a narrow column, and RIGHT for a wide page.

Views and scenarios

A scenario plays on one view. By default that is the first view; set view: on the scenario to pick another. Every node a scenario uses must be in its view, or docspp check reports Node "x" is not in view "v".

scenarios:
  thumbnails:
    title: Make thumbnails
    view: processing
    steps:
      - queue -> worker: photo.uploaded

When a view has no scenarios, the scenario buttons are not shown. A scenario is listed only on its own view.

Choosing a view on a page

<Diagram name="checkout" view="backend" />
<Diagram name="checkout" view="backend" scenario="place-order" />

Readers can still switch views with the tabs. See the Diagram component.