Create a C4-PlantUML diagram online, choose a context, container, or component template, define architecture relationships, then preview and export it.
Start with the C4 Diagram template, edit the PlantUML source, and preview the result live.
Use this focused c4 diagram tool for quick previews and exports. Open the full editor for AI generation, syntax repair, sharing, and saved projects.
Model people, software systems, system boundaries, containers, components, technologies, responsibilities, and labeled relationships at one architecture level in an editable PlantUML workspace with live preview and PNG or SVG export.
Start from valid PlantUML source designed for a practical c4 diagram.
See the rendered diagram update as you edit the PlantUML source.
Learn the syntax and modeling choices used for architecture onboarding, system landscape reviews, service boundary design, technical documentation, and engineering discussions.
Download a shareable PNG or scalable SVG from the same source.
Create and preview PlantUML without installing Java, Graphviz, or an IDE extension.
Move to the full editor for AI generation, repair, sharing, and saved projects.
Use the built-in template to create a c4 diagram for architecture onboarding, system landscape reviews, service boundary design, technical documentation, and engineering discussions.
Choose the C4 level that answers the audience’s question: context, container, or component.
Select the matching Context, Container, or Component template from the editor.
Define the people and external systems that interact with the system in scope.
Add containers or components with a responsibility and technology, then label their relationships.
Remove details from other zoom levels, check the preview, and export PNG or SVG.
Learn the core syntax and modeling decisions behind a useful c4 diagram, then apply them directly in the online editor above.
Use a system context view to explain who uses the system and which external systems it depends on. Use a container view to show applications and data stores inside one system. Use a component view only when readers need the internal building blocks of one container.
C4-PlantUML is a macro library used with PlantUML. The PlantUML standard library includes released C4 files, so a container diagram can start with the local standard-library include below instead of fetching a file from a remote URL.
!include <C4/C4_Container>Give every container or component one clear responsibility and name its main technology where that helps technical readers. Label each relationship with an action such as Uses, Sends, Reads, or Writes, and add the protocol only when it informs the design.
Container(api, "Rendering API", "Web API", "Renders diagram source")
ContainerDb(store, "Project Store", "Database", "Stores saved projects")
Rel(api, store, "Reads and writes projects", "SQL")A useful C4 diagram answers one architectural question for one audience. Do not mix source-code classes into a container view or expand every system at once. Create a separate, linked diagram when readers need the next level of detail.
The editable example demonstrates a practical c4 diagram. Change the source, check the live preview, and export the version you need.
@startuml
!include <C4/C4_Container>
LAYOUT_LEFT_RIGHT()
Person(user, "Diagram Author", "Creates and reviews diagrams")
System_Boundary(workspace, "Diagram Workspace") {
Container(web, "Web Application", "Next.js", "Edits source and shows diagram previews")
Container(api, "Rendering API", "Web API", "Validates source and requests rendered output")
ContainerDb(store, "Project Store", "Database", "Stores saved diagram projects")
}
Rel(user, web, "Creates diagrams with", "HTTPS")
Rel(web, api, "Requests previews from", "HTTPS/JSON")
Rel(api, store, "Reads and writes projects", "SQL")
SHOW_LEGEND()
@endumlUse these related tools when you need a different export format or a full PlantUML editing workflow.
Browse the complete OnUML matrix of online PlantUML tools and converters.
View all PlantUML toolsUse the general editor when you want to switch freely between diagram types.
Open the general editorLearn how context, container, and component views answer different architecture questions.
Read the C4 guideCreate and export a focused component diagram with a built-in template.
Create a component diagramPlantUML keeps c4 diagrams in reviewable text, making them easier to update, version, reuse, and export as the design changes.
Open directly into a C4 Diagram template instead of adapting an unrelated example.
Store the diagram as readable text that works well in documentation and version control.
Check structure, labels, and relationships before exporting the rendered diagram.
It is a browser-based editor that starts with a C4 Diagram template and lets you edit PlantUML source, preview the rendered diagram, and export PNG or SVG without local setup.
Use it to model people, software systems, system boundaries, containers, components, technologies, responsibilities, and labeled relationships at one architecture level. Common uses include architecture onboarding, system landscape reviews, service boundary design, technical documentation, and engineering discussions.
C4 diagrams use the C4-PlantUML macro library. Released C4 library files are bundled in the PlantUML standard library and can be included with paths such as <C4/C4_Container>.
Start with context for the big picture, container for the applications and data stores inside one system, and component only for the internal structure of one container. For many technical architecture discussions, the container view is the most useful starting point.
Yes. Preview the diagram, then download PNG for slides and quick sharing or SVG for scalable documentation and web use.
No. The online tool uses a server-backed preview, so you can edit and render the diagram directly in the browser.
Open the full OnUML editor for AI generation, syntax repair, sharing, saved projects, and multi-format diagram workflows.