C4

Not one line of Python. <person>, <container> and <external> come from the shipped c4 library, which is Sauvignon source you can read with cat sauvignon/prelude/c4.svgn - and which itself defines all four in terms of one <c4-element>, since a component may instantiate another. This is the answer to "how much of the language is written in the language": vocabulary can be, geometry and algorithms cannot. A C4 box is a name, a bracketed kind and a description - composition, so it belongs in a library rather than the engine.

Diagrams 494 × 588 <column><connect><container><contains><external><import><person>

Result

Source examples/c4.svgn

<diagram padding="26">
  <!-- Not one line of Python. <person>, <container> and <external> come from
       the shipped `c4` library, which is Sauvignon source you can read with
       `cat sauvignon/prelude/c4.svgn` - and which itself defines all four in
       terms of one <c4-element>, since a component may instantiate another.

       This is the answer to "how much of the language is written in the
       language": vocabulary can be, geometry and algorithms cannot. A C4 box
       is a name, a bracketed kind and a description - composition, so it
       belongs in a library rather than the engine. -->
  <import name="c4"/>

  <column gap="58" align="center">
    <person id="cust" title="Customer" descr="A personal banking customer"/>

    <contains label="Internet Banking [Software System]" layout="row" gap="30">
      <container id="spa" title="Single-Page App" kind="Container: React"
                 descr="Delivers the banking experience in a browser"/>
      <container id="api" title="API Application" kind="Container: Go"
                 descr="Provides banking functionality over JSON/HTTPS"/>
    </contains>

    <external id="mainframe" title="Mainframe Banking"
              descr="Stores accounts and transactions"/>
  </column>

  <connect from="cust" to="spa"       label="Visits"       head="open"/>
  <connect from="spa"  to="api"       label="Calls"        head="open"/>
  <connect from="api"  to="mainframe" label="Reads/writes" head="open"/>
</diagram>

Open the SVG →