draw-io

Topics in the source

• draw.io Diagram Skill
• 1. Basic Rules
• 2. Font Settings
• 3. Conversion Commands
• 4. Layout Adjustment
• 4.1. Coordinate Adjustment Steps
• 4.2. Coordinate Calculation
• 5. Design Principles

Edit only .drawio files Do not directly edit .drawio.png files Use auto-generated .drawio.png by pre-commit hook in slides 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: | Option | Description | |--------|-------------| | -x | Export mode | | -f png | PNG format output | | -s 2 | 2x scale (high resolution) | | -t | Transparent background | | -o | Output file path | 1. Open .drawio file in text editor (plain XML format) 2. Find mxCell for element to adjust (search by value attribute for text) 3. Adjust coordinates in mxGeometry tag x: Position from left y: Position from top width: Width height: Height 4. 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 colors, fonts, icon sizes, line thickness Accuracy: Do not sacrifice accuracy for simplification Label all elements Use arrows to indicate direction (prefer 2 unidirectional arrows over bidir

This is an excerpt. Refer to the complete source and its current requirements.