Engine + Framework

C4 with PlantUML with Eleventy (11ty)

Integration guide for teams shipping diagram rendering in Eleventy (11ty).

C4 with PlantUML usage guidance

Best for

  • General diagram rendering
  • Programmatic documentation pipelines
  • Automated visual generation

Syntax tip

Keep C4 with PlantUML source deterministic and reusable across environments.

Quick start

Call the ChartQuery API from your Eleventy (11ty) stack and return rendered C4 with PlantUML output to the UI.

Recommended flow

  1. Store your C4 with PlantUML source in code or markdown.
  2. Send source to a server-side endpoint backed by ChartQuery.
  3. Render returned SVG/PNG in Eleventy (11ty) pages and docs.

Typical Eleventy (11ty) integration path: /server/diagram-renderer

C4 with PlantUML integration details

FieldValue
EngineC4 with PlantUML
FrameworkEleventy (11ty)

Eleventy (11ty) implementation checklist

  • Add a server-side rendering endpoint
  • Validate and sanitize diagram input
  • Cache rendered output for recurring requests

C4 with PlantUML source example

// C4 with PlantUML source
// Add your diagram content here

C4 with PlantUML in Eleventy (11ty): quick comparison

Why teams usually prefer the ChartQuery API pattern over direct client-side rendering for C4 with PlantUML in Eleventy (11ty).

Feature
Eleventy (11ty) native setup
ChartQuery API setup
Server-side rendering without browser dependencies
✗
Unified output (SVG/PNG) for docs, dashboards, and emails
✗
Consistent rendering across environments
✗
Works with CI/CD pipelines
Fits backend-first architectures
Single rendering workflow across multiple frameworks
✗

Ship C4 with PlantUML in Eleventy (11ty) faster

Use ChartQuery to standardize diagram rendering across your stack with one API, one workflow, and predictable output quality.

Get started with ChartQuery

Same framework, other engines

MermaidGraphVizPlantUMLD2StructurizrUMletNomnomlSvgbobExcalidrawdiagrams.net (experimental)BPMNBlockDiagSeqDiagActDiagNwDiagPacketDiagRackDiagBytefieldDitaaErdPikchrSymbolatorVegaVega-LiteWaveDromWireViz

Same engine, other frameworks

C4 with PlantUML with Next.jsC4 with PlantUML with HugoC4 with PlantUML with NuxtC4 with PlantUML with AngularC4 with PlantUML with ReactC4 with PlantUML with VueC4 with PlantUML with SvelteKitC4 with PlantUML with AstroC4 with PlantUML with GatsbyC4 with PlantUML with RemixC4 with PlantUML with SolidStartC4 with PlantUML with QwikC4 with PlantUML with Ember.jsC4 with PlantUML with PreactC4 with PlantUML with LitC4 with PlantUML with Alpine.jsC4 with PlantUML with Ionic ReactC4 with PlantUML with Ionic VueC4 with PlantUML with Ionic AngularC4 with PlantUML with StencilC4 with PlantUML with MithrilC4 with PlantUML with MarkoC4 with PlantUML with Backbone.jsC4 with PlantUML with jQueryC4 with PlantUML with DocusaurusC4 with PlantUML with ViteC4 with PlantUML with Fresh (Deno)C4 with PlantUML with AnalogJSC4 with PlantUML with Aurelia

Start generating charts today

No API key required to get started. Generate charts, diagrams, and more with a single HTTP request.

Get StartedView Pricing