Mermaid GitHub Safe-Area

Use this skill when editing Mermaid diagrams for GitHub README rendering to prevent the bottom-right navigation/zoom controls from overlapping diagram content, using only %%{init: ...}%% configuration.

Constants

• CONTROLS_HEIGHT_PX = 110
• BUFFER_PX = 20
• SAFE_PX = 130

Use SAFE_PX as the minimum safe-area value.

Style keyword support: "handrawn style"

If the user asks for "handrawn style" or "hand drawn style":

• Always set a handwritten-style font stack via top-level fontFamily:
  • fontFamily = "virgil, excalifont, segoe print, bradley hand, chalkboard se, marker felt, comic sans ms, cursive"
• For flowcharts (and other supported types), also set look = "handDrawn".
• For sequence diagrams, do not set look (ignored/not supported there); rely on fontFamily only.

Rules