space-text-logic-diagram

Text Logical Relationship Diagram

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

WeChat Official Account Illustration Adaptation

Positioning: WeChat Official Account illustration tool. The user gives a piece of content (article / paragraph / argument), and you break down its logic into a diagram, making it into an illustration that can be placed directly into a WeChat Official Account.

Two Diagram Generation Methods：

HTML Diagram Generation (Main Path of This Skill): Generate self-contained HTML (containing SVG), which can be previewed locally; when an image is needed, screenshot the preview and export PNG.
Model Diagram Generation: Hand the broken-down logical structure + style description to the built-in image generation model of the current environment to generate PNG—Codex uses the built-in image_gen/image2, workbuddy uses its image generation model. Suitable when you want a "hand-drawn/illustrative feel" rather than precise SVG.

Common WeChat Official Account Sizes: Body illustration 16:9 or 3:2｜Square image 1:1｜Header image 2.35:1. When generating HTML, the canvas follows this ratio.

Output: By default saved in the user's pictures directory, named MMDD-主题.html or .png。

Trigger Conditions

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

"Generate a logic diagram" / "Draw a logical relationship diagram" / "Text to diagram"
"Logical breakdown" / "Break into a diagram" / "Visualization"
The user pastes article/paragraph/argument content and requests logical analysis
"Progressive diagram" / "Flowchart" / "Cycle diagram" / "Hierarchy diagram" / "Comparison diagram" / "Matrix diagram"
The user requests structured visualization of text

Workflow

Step 1: Text Analysis

Read 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 relationship types, choose the most suitable logical relationship for each paragraph:

Relationship Type	Applicable Scenario	Visual Features
Progressive relationship	Gradual conceptual development, deepening layer by layer	Staircase arrangement, arrows from left to right or top to bottom
Process relationship	Sequence of steps, stage progression	Linear/serpentine arrangement, numbered nodes
Cyclical relationship	Concept cycles back and forth, closed-loop feedback	Circular arrangement, end connected to beginning
Hierarchical structure	Containment, 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: Brief explanations of the connecting lines and arrows between concepts
Hierarchical organization: Distinguish primary concepts from secondary concepts

Step 3: Generate SVG diagrams

Based on the analysis results, generate an HTML file using this skill's design specifications.

Multi-segment splitting rules:

When the text contains multiple independent logical paragraphs, generate multiple SVG diagrams
Each diagram uses an independent <div class="diagram-card"> container
Label each diagram above with the paragraph title or logical type
Arrange all diagrams in order in the same HTML file

Design system

Theme system

Supports dark and light theme switching, dark by default.

Dark theme (default)

Combines 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)
Connecting lines	`rgba(38, 37, 30, 0.35)`
Arrows	`#8a8377`
Accent color	`#7a6e5e` (warm brown), `#c96442` (ochre)

Light theme

Combines 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)
Connecting lines	`#c8c5bc`
Arrows	`#8a8377`
Accent color	`#8a7e6e` (warm brown), `#c96442` (ochre)

Font specifications

Use JetBrains Mono monospace font globally
Node title: 14px, font-weight 600
Node sublabel: 11px, font-weight 400
Connecting line label: 10px
Paragraph 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 markers: Small arrows, line width 1
Shadow effects: Slight 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>

Connecting 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

Progressive relationship

Arrange in a staircase pattern from left to right
Nodes gradually rise or gradually increase in size
Arrow direction uniformly to the right
May use numbered labels for order (①②③)
Distinguish levels with light-colored backgrounds between each layer

Process relationship

Linear arrangement or serpentine arrangement (wrap when more than 4 nodes)
Each node has a step number (circular badge)
Connecting lines use solid arrows
The start node is emphasized with a dark color, and the end node uses a special style
Branch points use diamond-shaped nodes

Cyclic relationships

Circular arrangement, connected end to end
The core concept can be placed in the center
Connecting lines follow the circular direction
Use curved lines instead of straight lines to connect
Arrows point to the next node

Hierarchical structure

Tree structure: root node at the top, child nodes below
Or pyramid structure: wide at the bottom, narrow at the top
Nodes at the same level are aligned horizontally
Parent-child relationships are connected with vertical lines
Nested rectangles can be used to represent containment relationships

Contrast relationships

Left-right symmetrical layout
Separated in the middle by a vertical line or VS
The left and right sides use different color tones (such as blue vs orange)
Common points are placed in the middle or at the top
Differences are listed on both sides

Matrix relationships

Grid layout (2×2, 3×3, etc.)
Row and column headers label the dimensions
Place concepts in each cell
Quadrant-style partitioning (distinguished with light-colored backgrounds)
Diagonal relationships are marked with special colors

Page layout

Header - Title + brief description of the source text + theme toggle button
Overview card - Displays the detected relationship types and number of concepts
Chart 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

Node text uses Chinese, technical terms remain in English
Chinese character width is about 2 times that of English; node width is estimated as 14px × number of characters × 0.7
Concept names are kept to 2-10 Chinese characters
Connecting line labels use 4-8 Chinese characters

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