C4 Diagrams

This site has basic support for C4 model diagrams, using a custom React-based component model. For example, this diagram:

Generated using the following source code:

<C4Diagram>
  <C4Box title="Library user" type="Person">
    An app with the library integrated.
  </C4Box>
  <C4Box title="Drawing library" type="Software System" y="300">
    Parses input files, exposes the document model, and computes a rendering tree.
  </C4Box>
  <Connection from="Library user" to="Drawing library">
    Uses the API to load image files and render them
  </Connection>
  <C4Box title="Rendering backend" type="Software System" x="400" y="300" existing="true">
    Takes draw commands and renders the final image.
  </C4Box>
  <Connection from="Drawing library" to="Rendering backend">
    Dispatches draw calls
  </Connection>
  <Connection from="Rendering backend" to="Library user">
    Produces rendered image buffer
  </Connection>
</C4Diagram>

Ideal syntax

Ideally, this component-based model should be simplified with a Markdown plugin, for example like with ```mermaid code blocks. For example, this should be possible:

```c4
Library user
- Person
- An app with the library integrated.
-> Drawing library: Uses the API to load image files and render them

Drawing library
- Software System
- Parses input files, exposes the document model, and computes a rendering tree.
-> Rendering backend: Dispatches draw calls

Rendering backend [external]
- Software System
- Takes draw commands and renders the final image.
-> Library user: Produces rendered image buffer
```