Three diagrams from the C4-PlantUML example set, redrawn by the sketch engine that renders every diagram on this site. The test was to reproduce them rather than to pick the parts that happened to be easy: every element keeps its name, its type, its technology and its full description, and every relation keeps both lines of its label.
What changed is the vocabulary. C4 specifies its own palette; this site has its own, and a foreign palette on a themed page reads as a foreign object. So each mark is translated to the nearest one here. The facts survive, the marks do not.
| c4 | here |
|---|---|
| blue fill, internal container | the default box |
| grey fill, outside the boundary | tone=muted |
| eight sided, tagged container | the same shape, plus the accent border |
| cylinder, datastore | the same cylinder |
| person outline | the same outline |
| dashed line, async | the same dashed line |
| dotted line, sync/async | the same dotted line |
Click any diagram to open it full screen; drag to pan, scroll to zoom.
container diagram: internet banking
Eight elements, a system boundary, ten relations, three shapes, three line styles.
container diagram: techtribes.js
Three kinds of user, five containers inside one boundary, three external systems, twelve relations. The interesting part is the updater, which writes to all three stores and reads from three systems it does not own.
sequence diagram: authentication
A different notation entirely. There are no sequence primitives in the engine; this is lifelines, activation, fragments and dividers drawn out of lines, closed paths and text, the same pieces any other diagram uses.
Regions are dashed, like the boundary in the diagrams above, and carry their name in the
top left rather than in a tab. A ref is a solid box, because it holds content and sits
on a lifeline. Messages are in the text colour and everything structural is dim, so the
exchange reads before its scaffolding does.
This is also the one diagram where the text changed: Authentication Request reads
Auth Request, because a sequence diagram is read across rather than down and the full
names crowd the lifelines.
what it does not do
One thing, and it is not small: layout. PlantUML is given a list of elements and relations and works out where everything goes. Every coordinate in all three diagrams above was typed by hand.
That is also what stands between these and a translator that reads a C4 file and emits one of these directly. The vocabulary maps cleanly; the placement does not map at all.
The grammar behind all three is written up in diagrams as code.