Aller au contenu principal

Diagrams & Slides

This site supports three rendering integrations. Each has its own source format and build step, wired into npm start and npm run build.

LikeC4​

Architecture-as-a-model with interactive diagrams. Edit the model under likec4/; run npm run likec4:codegen to regenerate the TypeScript model (this also runs automatically on build).

A second view of the same model — the deployment stack from container to hardware:

CALM​

FINOS Common Architecture Language Model. Edit the architecture in calm/website.architecture.json; npm run calm:build validates it and renders it to a Mermaid diagram embedded below.

Slidev​

Developer-focused Markdown slide decks, managed as an npm workspace under slides/. Each deck is its own package at slides/decks/<name>/ with its own slides.md and pinned Slidev version. npm run slidev:build builds each deck (via its own build script) into a static app served at /slides/<name>/. All decks are discovered automatically.

All decks​

AI-DLC × OpenSpec — Staying in Control When the AI Writes the CodeOuvrir en plein écran →
Adopter le codage agentique — et garder la main en équipeOuvrir en plein écran →
Architecture OverviewOuvrir en plein écran →

Embedded deck​

Any deck can also be embedded inline:

Open the deck full screen.

Live code​

Interactive, editable React snippets via @docusaurus/theme-live-codeblock. Add live to a jsx code block and the reader can edit it and see the result update in place:

Éditeur en direct
function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button
      onClick={() => setCount((c) => c + 1)}
      style={{
        padding: '0.5rem 1rem',
        borderRadius: 'var(--ifm-global-radius)',
        border: '1px solid var(--ifm-color-emphasis-300)',
      }}
    >
      Clicked {count} time{count === 1 ? '' : 's'}
    </button>
  );
}
Résultat
Loading...