text-logic-diagram

Text Logical Relationship Diagram

Convert text into precise logical relationship SVG diagrams, output as standalone HTML files.

Trigger Conditions

When the user mentions the following scenarios, actively use this skill:

"Generate a logic diagram" / "Draw a logical relationship diagram" / "Text to diagram"
"Logical breakdown" / "Break into diagrams" / "Visualization"
The user pastes article/paragraph/argumentative content and requests logical 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, select 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 cycle, 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 HTML files.

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
Above each diagram, label the paragraph title or logical type
All diagrams are arranged in order in the same HTML file

Design System

Theme System

Supports dark and light theme switching, default is dark.

Dark Theme (Default)

Blend Cursor's warm dark background + Claude's ochre accent color. Say goodbye to cool 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 lines	`rgba(38, 37, 30, 0.35)`
Arrows	`#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 lines	`#c8c5bc`
Arrows	`#8a8377`
Accent color	`#8a7e6e` (warm brown), `#c96442` (ochre)

Typography specifications

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 specifications

General specifications

Canvas size: each diagram viewBox 0 0 800 500, adjust as needed
Padding: leave 40px on all sides
Arrow marker: small arrow, stroke width 1
Shadow effect: subtle shadow dx=1.5, dy=1.5, stdDeviation=2

Node styles

<!-- 带阴影的圆角矩形节点 -->
<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 styles

<!-- 标准连接线 -->
<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 specifications

Progression relationship

Staircase arrangement from left to right
Nodes gradually rise or gradually increase in size
Arrow direction uniformly to the right
Numbers may be used to mark order (①②③)
Use light-colored backgrounds between each layer to distinguish levels

Process relationship

Linear arrangement or serpentine arrangement (wrap when more than 4 nodes)
Each node has a step number (circular badge)
Connector lines use solid arrows
Start node uses dark emphasis, end node uses a special style
Branch points use diamond nodes

Cyclic relationship

Circular arrangement, connected end to end
The core concept may be placed in the center
Connector lines follow the circular direction
Use curved connections 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 may be used to represent containment relationships

Comparison relationship

Left-right symmetrical layout
Separate with a vertical bar or VS
Use different color tones on the left and right sides (e.g., blue vs orange)
Place common points 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 (distinguished by light-colored backgrounds)
Mark diagonal relationships with special colors

Page Layout

Header - Title + source text summary + theme toggle button
Overview Card - Displays the detected relationship type and number of concepts
Diagram Area - Multiple SVG diagrams arranged in sequence, each with a title label
Footer - Metadata

Multi-Diagram Layout 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, including:

Embedded CSS (with 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