See what changed, and why.
Store diagram source in Git. A pull request can show the new system, the removed dependency or the changed message, with a discussion and an identifiable author.
THE ARCHITECTURE LAB
A clearer picture.
A better conversation.
Explore the diagrams that make complex solutions easier to understand. Start with a familiar story, discover the views that answer your questions, and make them your own.
Free to use · Browser rendering · Credit where it’s due
SOLUTION SNAPSHOTService request
Start with a question. Pick a diagram.
8diagram platforms
89curated examples
100%browser rendering
Yoursto edit and export
WHY WE LIKE DIAGRAMS AS CODE
Keep the picture close to the thinking.
A text description gives a diagram a source you can read, review and maintain alongside the solution it explains. The value is a shared understanding that is easier to keep current.
Update the diagram with the solution.
Keep source beside specifications, application code and architecture decisions. Include diagram updates in the same change so documentation has a place in delivery.
Render it again, consistently.
Reuse source, shared conventions and a pinned renderer version. Generate a fresh image for a README, design review or presentation without rebuilding the drawing by hand.
Bring diagrams into your checks.
A build can validate syntax and regenerate published views. That catches broken source; a person still needs to check whether the architecture is accurate and useful.
Start from a useful pattern.
Share snippets, naming conventions and example views. Adapt an integration pattern or lifecycle rather than starting with an empty canvas every time.
Make a change easy to discuss.
Plain text is easy to search, copy and suggest edits to. AI can help draft it too, provided someone checks the meaning, relationships and assumptions.
Choose the medium for the conversation.
Automatic layouts offer less precise visual control than a drawing canvas. Large text diffs can be difficult to review, and correct syntax does not make a correct architecture. Use the visual editors for collaborative sketching and diagrams as code when repeatability and change history matter.
Try a small change in the playground →01 / THE EXAMPLE LIBRARY
One story. Different questions. Useful views.
Choose a familiar story, read the shared brief, then explore the questions different diagrams answer. Switch to diagram type or platform whenever you prefer.
No examples match those filters. Try another diagram type or platform.
02 / START WITH THE QUESTION
Which diagram do you need?
The best diagram is the one that helps your audience answer the question.
| Diagram family | What it explains | When to use it | Try it with |
|---|
ENTERPRISE ARCHITECTURE / ARCHIMATE®
Connect the business to the technology.
ArchiMate is The Open Group’s enterprise architecture modelling language. Its views help connect business concerns with applications and technology. Start with the stakeholder’s question, then select the concepts and relationships that answer it.
A useful view at each level.
BUSINESSWhat service are we delivering?
Business processes, roles and services.
APPLICATIONWhich software capabilities support it?
Application components, services and information exchange.
TECHNOLOGYWhat does the software depend on?
Platform services and infrastructure.
Explore four starting points.
The PlantUML examples use its native archimate element syntax and explicit type labels, with self-contained source. The D2 example uses a similar layer structure.
These are illustrative architecture views. This playground does not maintain an enterprise model, validate allowed ArchiMate relationships or provide model exchange. It is not an ArchiMate-certified modelling tool.
The language and notation
Read the language owner’s guidance and PlantUML’s notation documentation.
The Open Group · ArchiMate ↗PlantUML · ArchiMate syntax ↗Need a full model? Explore Archi.
Archi is a separate open-source desktop modelling tool for Windows, macOS and Linux. It provides model concepts, relationships and multiple views. It is linked here as a resource and is not embedded in this static site.
Archi · Project home ↗ArchiMate® is a registered trademark of The Open Group. Archi® is a registered trademark of Phillip Beauvoir. Language and tool ownership remain with their respective creators; this is an independent showcase.
03 / MEET THE PLATFORMS
Different tools. Shared understanding.
Independent open-source projects power this lab. Explore their strengths and visit the people behind them.
04 / MAKE IT YOUR OWN
The architecture playground.
Edit the source, see the result, and take the diagram into your next conversation.
SOURCE
0 lines
DIAGRAM PREVIEW
Ready to explore
Your file is ready.
Word and PowerPoint diagrams use editable objects. For editing individual shapes, open the file in desktop Office.
DOCUMENT TOOLS / MARKDOWN TO WORD
Turn your Markdown into an editable Word document.
Paste a document or upload a Markdown file. Headings, emphasis, lists, links, tables and code become editable Word content. Diagram fences use the same local engines as the playground.
Document preview
Preview your document to render its diagrams here.
Use fenced code blocks with a language: mermaid, plantuml, d2, dot, vega-lite, wavedrom, bpmn, drawio or svg. Aliases include puml, uml, mmd, graphviz and vega. A fence starts with three backticks and the language, followed by diagram source and three closing backticks. Single-backtick inline code remains editable text.
Ready to convert. No document content is uploaded.
Supported content and conversion limits
All eight diagram platforms in this lab are supported, plus self-contained SVG. Word diagrams contain native editable drawing shapes and labels; use desktop Word to edit objects inside each group. A renderer must return supported vector shapes. If a block fails, its source and error are retained instead of being silently dropped. Unknown fences and single-backtick inline code remain ordinary code.
Images become alt-text placeholders, raw HTML remains text, and remote resources are disabled. Use uncompressed diagrams.net XML. Mermaid types, PlantUML features and visual effects depend on the bundled engines and editable SVG converter. This does not promise lossless conversion for every notation or Markdown extension.
Convert up to 300,000 characters and 20 diagrams per document, with up to 100,000 characters per diagram. Uploaded files stay in this browser session. The download uses native DOCX formatting; it is not an HTML file renamed as Word.
05 / BUILT TO BE USEFUL
Good diagrams deserve a useful export.
Editable in Office
Word and PowerPoint contain native drawing shapes and text boxes. Select individual objects in PowerPoint, or work inside the drawing group in desktop Word. They are not flattened screenshots.
Complex effects, bitmap images and unsupported masks can prevent a fully editable conversion. The export will explain the issue. Office font availability and layout may differ.
Portable by design
Keep the original source or project JSON to continue editing. SVG preserves vectors; PNG is useful for sharing. HTML creates a standalone diagram page. Print / PDF uses your browser’s print dialog.
Office edits do not automatically update the original diagram source. This lab does not claim lossless conversion for every possible platform feature.
Private rendering
Diagram engines are served from this site and run on your device. There is no diagram rendering API. Local saves stay in your browser; share links contain the source and anyone with the link can read it.
Mightora’s shared branding components load from their CDN. External diagram resources are restricted in the text playgrounds.
WITH THANKS TO THE CREATORS
Standing on open-source shoulders.
Mightora’s examples and interface are by Ian Tweedie. Rendering and visual editing are powered by the projects credited below. This is an independent showcase, not an endorsement by those projects.
Markdown parsing uses Marked, by Christopher Jeffrey and its contributors, under the MIT licence. Its licence is included in the third-party notices.
