Diagrams

Diagrams

Diagrams in Studio are real records, not screenshots pasted into a document. You draw them in the browser, they have revisions and a lifecycle, their elements can point to artifacts, and you can embed them anywhere you write formatted text.

Two notations come out of the box:

Notation	Engine	Good for
BPMN 2.0	bpmn-js	Business processes, workflows, who does what and when.
UML	PlantUML, running in the browser	Use case, class, sequence, state, component diagrams…

Everything runs in your browser. No diagram ever leaves your server to be rendered somewhere else.

BPMN: drawing processes

1. Go to Diagrams → Add diagram → BPMN process.
2. Give it a name and open the Modeler tab.
3. Drag events, tasks and gateways from the palette, connect them, double-click to name them.
4. Save. Studio keeps the BPMN XML, a safe SVG preview and a new revision.

UML: diagrams as text

UML diagrams are written in PlantUML's friendly text syntax, with a live preview next to the editor. For example, the diagram above is just:

@startuml
actor Clerk
rectangle "Billing platform" {
  usecase "File a claim" as UC1
  usecase "Get deadline warning" as UC2
}
Clerk --> UC1
Clerk --> UC2
UC1 .> UC2 : <<include>>
@enduml

Text-based diagrams are a joy to review: the revision history shows exactly which line changed.

🧩 Tip: install the PlantUML for GitHub Chrome extension and the block above (and any plantuml block on GitHub, in wikis, READMEs, issues and pull requests) turns into a rendered diagram. Perfect for sharing Studio diagrams with people outside Studio: copy the source from the diagram's Source section, paste it into a GitHub comment, done.

Linking diagram elements to records

A task in a BPMN process or a use case bubble in UML can be linked to a Drupal record: the artifact it represents, the activity that performs it… The diagram page lists these under Linked elements, and the record shows which diagrams mention it. When you rename the artifact, the link still holds.

Embedding diagrams in text

Writing a use case description or a decision record and want the diagram right there? In any Basic HTML or Full HTML text field, click the Diagram button in the editor toolbar and pick a diagram.

sequenceDiagram
    actor You
    participant Editor as Text editor (CKEditor 5)
    participant Studio
    You->>Editor: Click "Diagram"
    Editor->>Studio: Search diagrams
    Studio-->>Editor: Matching diagrams you can see
    You->>Editor: Pick "Claim intake"
    Editor->>Editor: Insert <drupal-diagram>
    Note over Studio: On display, the tag becomes<br/>the live diagram preview

Loading

The embedded diagram is always the current version, and the diagram page lists everywhere it's Embedded in.

Lifecycle

Diagrams follow the editorial lifecycle Draft → In review → Published → Archived, with revisions on every save, just like artifacts.

Tips

• Keep one process per BPMN diagram; link sub-processes as separate diagrams.
• Trace the diagram to what it explains with Documents. Then it shows up on the artifact's page.
• For UML, the PlantUML guide is your friend.