Draw.io Diagram Creation Guidelines

Overview

This skill provides proven best practices for creating high-quality draw.io diagrams that render correctly in PNG format with proper Japanese text support, correct layering, and professional appearance.

Core Guidelines

1. Font Configuration

Critical: Each text element must have explicit fontFamily attribute.

<mxCell ... style="text;...fontFamily=Noto Sans JP;..." />

Why: The defaultFontFamily in <mxGraphModel> does NOT affect PNG export. Only element-level fontFamily attributes are respected during image rendering.