clone

a browser-first diagram editor with live svg previews, local drafts and encrypted, accountless sharing

main
diagramzip / apps / docs / static / skills / system-context-diagram / SKILL.md
SKILL.md 2.6K rendered
1---2name: system-context-diagram3description: Explain one system in its environment by showing its users, external systems, and the relationships that matter.4---56# System context diagram78## What it tells910This view answers “what is this system, who uses it, and what does it depend on?” It shows one named system as the focal boundary plus relevant people, organizations, external systems, and high-level relationships.1112## Use and boundaries1314Use it for onboarding, product scope, stakeholder alignment, risk review, and early architecture decisions. Keep the focal system as one box. Do not open it into containers or components, and do not turn external systems into infrastructure nodes. Add a system landscape first when the audience needs portfolio context.1516## Method1718Name the system by purpose, identify actors by role, and list external systems only when they exchange information or impose a meaningful constraint. Label every relationship with a concise verb and optionally direction, protocol, or data. Make system ownership and trust boundaries explicit when they affect the story. Prefer one context diagram per focal system and audience.1920## Renderer routing2122Preserve a requested renderer. Prefer `structurizr` when the context view belongs to a reusable C4 workspace model, `c4plantuml` for a focused C4 source, `plantuml` for an unconstrained architecture view, or `mermaid`, `d2`, and `graphviz` for lightweight sketches. Use `blockdiag` only for an informal block view; it will not encode C4 roles or semantics for you.2324## Style and review2526Use a strong visual treatment for the focal system, a consistent actor shape, and a neutral external-system shape. Keep the canvas sparse, route edges clearly, and include a legend for trust or relationship patterns. Ensure the focal boundary is unambiguous, all important actors/dependencies are named, arrows are readable in grayscale, and no internal implementation details slipped in.2728## Prior art and limits2930The C4 context diagram is a widely used framing convention and is deliberately notation-independent, not a formal interchange standard. ArchiMate and UML can provide formal viewpoints, but diagram.zip does not currently expose a dedicated ArchiMate source or a profile-enforced context renderer. That is an integration opportunity if formal semantics or model exchange becomes a requirement. See [C4 diagrams](https://c4model.com/diagrams), [C4 notation](https://c4model.com/diagrams/notation), [UML](https://www.omg.org/spec/UML/2.5.1/), and [ArchiMate overview](https://www.opengroup.org/archimate-forum/archimate-overview).