For AI agents: the complete documentation index is available at https://lazygophers.github.io/pamphlet/en/llms.txt, the full documentation bundle is available at https://lazygophers.github.io/pamphlet/en/llms-full.txt, and this page is available as Markdown at https://lazygophers.github.io/pamphlet/en/write/diagrams/mermaid/c4.md.
Pamphlet
  • English

      • System context diagrams (Mermaid fence)

      What it is

      The same diagram as System context diagrams; only how you write it differs. This page uses a ```mermaid fence and writes Mermaid source directly.

      When to use it

      • The source goes to GitHub and you want the diagram to render there — Pamphlet's own syntax shows up as plain text on GitHub
      • You already know Mermaid and would rather not learn a second thing
      • You need something the own syntax cannot express (the Traps section below says what)

      Otherwise use the own syntax: the field names are fixed, and a mistake is reported on the line it is on.

      How to write it

      ```mermaid
C4Context
  title Who uses Pamphlet
  Person(author, "Author", "writes Markdown")
  System(pamphlet, "Pamphlet", "compiles one .md into one HTML")
  System_Ext(reader, "Reader's browser", "opens the output")
  Rel(author, pamphlet, "pamphlet build")
  Rel(pamphlet, reader, "one self-contained HTML file")
```

      What comes out

      Drawn to SVG at compile time and inlined into the output, so the reader downloads no drawing library and makes no network request. Colours follow the theme; scroll to zoom, drag to pan, double-click to reset.

      Traps

      • Person is a human, System is yours, System_Ext is external (rendered in a different colour)
      • The first argument is an ASCII id; the next two are the displayed name and description
      • C4 also has C4Container and C4Component for finer levels