draw-io

For diagrams used in Quarto slides, specify defaultFontFamily in mxGraphModel tag: Also explicitly specify fontFamily in each text element's style attribute: See conversion script at scripts/convert-drawio-to-png.sh . Internal command used: Separate complex systems into staged diagrams: Include title, description, last updated, author, and version in diagrams. For text elements, exitX/exitY don't work, so use explicit coordinates: Adjust offset attribute to distance arrow labels from arrows: When placing elements inside background frames (grouping boxes), ensure sufficient margin. Coordinate calculation verification: Bad example (may overflow): Good example (sufficient margin): AWS icon search examples: Add auto-stretch: false to YAML header: This ensures correct image display on mobile devices. - Edit only .drawio files - Do not directly edit .drawio.png files - Use auto-generated .drawio.png by pre-commit hook in slides - Open .drawio file in text editor (plain XML format) - Find mxCell for element to adjust (search by value attribute for text) - Adjust coordinates in mxGeometry tag - x : Position from left - y : Position from top - width : Width - height : Height - Run conversion and verify - Element center coordinate = y + (height / 2) - To align multiple elements, calculate and match center coordinates - Clarity: Create simple, visually clean diagrams - Consistency: Unify...