Drawio Architecture

Quick-Start Example: C4 Container Diagram (XML)

<mxGraphModel>
  <root>
    <mxCell id=”0”/>
    <mxCell id=”1” parent=”0”/>
    <!-- Web App container -->
    <mxCell id=”2” value=”Web Application&#xa;[React, TypeScript]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
      <mxGeometry x=”100” y=”100” width=”160” height=”80” as=”geometry”/>
    </mxCell>
    <!-- API container -->
    <mxCell id=”3” value=”API Server&#xa;[Go, Gin]” style=”rounded=1;whiteSpace=wrap;fillColor=#438DD5;fontColor=#ffffff;” vertex=”1” parent=”1”>
      <mxGeometry x=”400” y=”100” width=”160” height=”80” as=”geometry”/>
    </mxCell>
    <!-- Arrow: Web App → API -->
    <mxCell id=”4” value=”REST/JSON” style=”edgeStyle=orthogonalEdgeStyle;” edge=”1” source=”2” target=”3” parent=”1”/>
  </root>
</mxGraphModel>

Collaboration

• Version control - Store .drawio files in Git alongside source code
• Confluence - Use the Draw.io Confluence plugin for inline editing
• Google Drive - Open diagrams.net with Google Drive integration

Best Practices

1. One diagram, one topic - Avoid cramming multiple concerns into a single diagram
2. Consistent styling - Use the same colors, fonts, and arrow styles across all diagrams
3. Add a legend - Explain what colors and shapes represent
4. Layer complex systems - Use multiple diagrams at different abstraction levels (C4 levels 1-3)
5. Note the update date - Add a “Last updated: YYYY-MM-DD” label for living documents

Keywords

draw.io, diagrams.net, architecture diagram, C4, deployment diagram, UML, component diagram, 架构图, 部署图, system design, cloud architecture