Diagram Drawing Plus

Problem

Technical documents, papers, and system design notes often contain layered entities, causal paths, and organizational dimensions, but plain text can hide critical relationships. Using Mermaid, matplotlib, or webpage screenshots directly can lead to automatic layouts that ignore semantic hierarchy, raster outputs that cannot be scaled without loss, inconsistent node granularity, and weak expression of causal direction, loops, and moderating conditions.

How it works

The skill treats diagram drawing as a staged process, emphasizing analyze first, draw second:
- Document structure analysis: summarize the core proposition, split the material into logical blocks such as premise, method, finding, or path, then extract entities, relations, and attributes.
- Diagram type selection: use a mechanism diagram when explaining why something happens or how it operates; use a framework diagram when showing what it consists of and how it is organized; the two can be combined.
- Pure SVG rendering: define nodes, arrows, sections, labels, and text with SVG, then render high-resolution vector output through CairoSVG for lossless scaling and reuse.
- Granularity and layout control: keep the main nodes within 5 to 15, distinguish parallel, sequential, reinforcing, balancing, and moderating relationships, and avoid mixing abstract concepts with concrete actions.

Boundaries

It suits converting paper passages, system design notes, policy interpretations, or solution materials into mechanism diagrams, framework diagrams, and flowcharts. The more complete the input, the more stable the output; if entities and relations are ambiguous, manual clarification is needed first. It does not replace precise engineering drafting, nor can it infer missing information into correct conclusions.