Convert text into precise logic relationship SVG diagrams, output as standalone HTML files.
Trigger Conditions
When users mention the following scenarios, proactively use this skill:
- "Generate a logic diagram" / "Draw a logic relationship diagram" / "Text to diagram"
- "Logic breakdown" / "Break into diagrams" / "Visualization"
- The user pastes an article/paragraph/argumentative content and requests logic analysis
- "Progression diagram" / "Flowchart" / "Cycle diagram" / "Hierarchy diagram" / "Comparison diagram" / "Matrix diagram"
- The user requests structured visualization of text
Workflow
Step 1: Text Analysis
- Read through the full text, identify the core arguments, key concepts, and logical chains in the text
- Paragraph breakdown, split the text by natural paragraphs or logical paragraphs
- Determine the relationship type, choose the most suitable logical relationship for each paragraph:
| Relationship Type | Applicable Scenario | Visual Features |
|---|---|---|
| Progression relationship | Gradual conceptual development, deepening layer by layer | Staircase arrangement, arrows from left to right or top to bottom |
| Process relationship | Step sequence, stage progression | Linear/serpentine arrangement, numbered nodes |
| Cycle relationship | Conceptual recurrence, closed-loop feedback | Circular arrangement, connected end to end |
| Hierarchical structure | Inclusion, subordination, classification relationships | Tree/pyramid/nested structure |
| Comparison relationship | Contrast, comparison, pros and cons analysis | Left-right/top-bottom symmetrical arrangement |
| Matrix relationship | Multi-dimensional intersection, complex associations | Grid/quadrant layout |
Step 2: Concept Abstraction
- Extract keywords: extract 2-6 core concepts from each paragraph
- Condense text: keep the text of each concept node within 15 characters
- Label relationships: briefly annotate the connecting lines and arrows between concepts
- Organize by layers: distinguish primary concepts from secondary concepts
Step 3: Generate SVG Diagrams
Based on the analysis results, use this skill's design specifications to generate an HTML file.
Multi-paragraph breakdown rules:
- When the text contains multiple independent logical paragraphs, generate multiple SVG diagrams
- Each diagram uses an independent
<div class="diagram-card">container - Label the paragraph title or logic type above each diagram
- Arrange all diagrams in order in the same HTML file
Design System
Theme System
Supports dark and light theme switching, defaulting to dark.
Dark theme (default)
Blend Cursor's warm dark background + Claude's ochre accent color. Say goodbye to cold blue tones.
| Element | Color |
|---|---|
| Page background | #141413 (warm near-black) |
| Card background | #1a1a18 |
| Node fill primary color | #1e1e1c → #282825 |
| Node stroke | #7a6e5e (warm brown) |
| Primary text | #faf9f5 (Ivory warm white) |
| Secondary text | #b0aea5 (warm silver) |
| Connector line | rgba(38, 37, 30, 0.35) |
| Arrow | #8a8377 |
| Accent color | #7a6e5e (warm brown), #c96442 (ochre) |
Light theme
Blend Claude's parchment + Cursor's warm surface.
| Element | Color |
|---|---|
| Page background | #f5f4ed (parchment) |
| Card background | #faf9f5 (Ivory) |
| Node fill primary color | #ebe9e2 → #e0ddd4 |
| Node stroke | #8a7e6e (warm brown) |
| Primary text | #141413 (warm near-black) |
| Secondary text | #5e5d59 (olive gray) |
| Connector line | #c8c5bc |
| Arrow | #8a8377 |
| Accent color | #8a7e6e (warm brown), #c96442 (ochre) |
Typography specification
- Use JetBrains Mono monospace font globally
- Node title: 14px, font-weight 600
- Node sublabel: 11px, font-weight 400
- Connector line label: 10px
- Section title: 16px, font-weight 700
- Legend text: 10px
SVG specification
General specification
- Canvas size: viewBox per image
0 0 800 500, adjust as needed - Padding: leave 40px on all sides
- Arrow marker: small arrow, line width 1
- Shadow effect: slight shadow
dx=1.5, dy=1.5, stdDeviation=2
Node style
<!-- 带阴影的圆角矩形节点 -->
<rect x="X" y="Y" width="W" height="H" rx="8"
class="svg-node" stroke="#7a6e5e" stroke-width="1.5"
filter="url(#shadow)"/>
<text x="CX" y="CY" class="svg-text-primary" font-size="14" font-weight="600"
text-anchor="middle">概念名称</text>
Connector line style
<!-- 标准连接线 -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
class="svg-line" stroke-width="1" marker-end="url(#arrow)"/>
<!-- 虚线连接（表示弱关系/隐含关系） -->
<line x1="X1" y1="Y1" x2="X2" y2="Y2"
class="svg-line" stroke-width="1" stroke-dasharray="4,3"
marker-end="url(#arrow)"/>
<!-- 曲线连接（避开障碍物） -->
<path d="M X1 Y1 Q CX CY X2 Y2"
class="svg-line" stroke-width="1" fill="none"
marker-end="url(#arrow)"/>
Relationship type visual specification
Progression relationship
- Left-to-right stepped arrangement
- Nodes gradually rise or gradually increase in size
- Arrow direction uniformly to the right
- Numbers may be used to mark the order (①②③)
- Use light background between each layer to distinguish levels
Process relationship
- Linear arrangement or serpentine arrangement (wrap when there are more than 4 nodes)
- Each node has a step number (circular badge)
- Connector lines use solid arrows
- The start node uses dark emphasis, the end node uses a special style
- Branch points use diamond nodes
Cyclic relationship
- Circular arrangement, connected end to end
- The core concept can be placed in the center
- Connector lines follow the circular direction
- Use curved lines instead of straight lines
- Arrows point to the next node
Hierarchy
- Tree structure: root node on top, child nodes below
- Or pyramid structure: wide at the bottom, narrow at the top
- Nodes at the same level are horizontally aligned
- Parent-child relationships are connected with vertical lines
- Nested rectangles can be used to represent containment relationships
Contrast relationship
- Symmetrical left-right layout
- Separate with a vertical bar or VS
- Use different color tones on the left and right sides (e.g., blue vs orange)
- Place commonalities in the middle or at the top
- List differences on both sides
Matrix relationships
- Grid layout (2×2, 3×3, etc.)
- Label rows and columns with dimensions
- Place concepts in each cell
- Quadrant-style partitioning (distinguish with light-colored backgrounds)
- Mark diagonal relationships with a special color
Page layout
- Header - Title + brief source text description + theme toggle button
- Overview card - Display the detected relationship type and number of concepts
- Diagram area - Multiple SVG diagrams arranged in order, each with a title label
- Footer - Metadata
Multi-diagram arrangement template
<div class="diagram-card">
<div class="diagram-label">
<span class="label-tag">递进关系</span>
<span class="label-title">第一段：XXX 的渐进发展</span>
</div>
<div class="diagram-body">
<svg class="diagram-svg" viewBox="0 0 800 500">
<!-- SVG 内容 -->
</svg>
</div>
</div>
Chinese adaptation rules
- Use Chinese for node text, keep technical terms in English
- Chinese characters are about 2 times the width of English; estimate node width as 14px × character count × 0.7
- Keep concept names to 2-10 Chinese characters
- Use 4-8 Chinese characters for connector labels
Output requirements
Always generate a standalone .html file, containing:
- Embedded CSS (including theme variables)
- Multiple inline SVGs (split by paragraph)
- A small amount of JavaScript for theme switching
- The file can be opened directly in a browser