Agent skill

Space Text Logic Diagram

by SpaceZephyr in SpaceZephyr/design-buddy

将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。

MITAuto-check passed

Install Space Text Logic Diagram

skills CLI
$ npx skills add SpaceZephyr/design-buddy --skill space-text-logic-diagram -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install SpaceZephyr/design-buddy space-text-logic-diagram --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/SpaceZephyr/design-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/space-text-logic-diagram .claude/skills/space-text-logic-diagram && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
space-text-logic-diagram
GitHub stars
176
Token cost
~1k tokens
SKILL.md length
279 words
Files
2 (incl. assets)
Skills in repo
16
Repo updated
First seen
Licence
MIT

At a glance

将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。

  • Works in 3 steps: 通读全文,识别文本中的核心论点、关键概念和逻辑链条 → 段落拆解,将文本按自然段落或逻辑段落分割 → 判断关系类型,为每个段落选择最适合的逻辑关系
  • SKILL.md covers 触发条件, 工作流程, 设计系统 and 中文适配规则, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Space Text Logic Diagram is an agent skill from SpaceZephyr/design-buddy. 将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including assets.

The repository describes itself as: Design Buddy: visual production Agent Skills for brand design systems, GPT-image-2 images, diagrams, infographics, logos, slide decks, WeChat layouts and social images. The licence is MIT.

Example prompts

  • “/space-text-logic-diagram”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. 通读全文,识别文本中的核心论点、关键概念和逻辑链条
  2. 段落拆解,将文本按自然段落或逻辑段落分割
  3. 判断关系类型,为每个段落选择最适合的逻辑关系

What it can do on your machine

Read from SKILL.md and the folder at commit f1d835f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are svg and html).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Space Text Logic Diagram loads about 1k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 279 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from SpaceZephyr/design-buddy at commit f1d835f, republished under its MIT licence (© SpaceZephyr). 279 words, ~1,013 tokens.

Download SKILL.mdSave it as .claude/skills/space-text-logic-diagram/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
space-text-logic-diagram
description
将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。
license
MIT
metadata.version
1.1
metadata.author
Text Logic Diagram Skill

文本逻辑关系图

将文本转换为精准的逻辑关系 SVG 图,输出为独立 HTML 文件。

触发条件

当用户提到以下场景时,主动使用此技能:

  • "生成逻辑图" / "画逻辑关系图" / "文本转图"
  • "逻辑拆解" / "拆成图" / "可视化"
  • 用户粘贴了文章/段落/论述内容并要求分析逻辑
  • "递进图" / "流程图" / "循环图" / "层次图" / "对比图" / "矩阵图"
  • 用户要求对文本进行结构化可视化

工作流程

第一步:文本分析
  1. 通读全文,识别文本中的核心论点、关键概念和逻辑链条
  2. 段落拆解,将文本按自然段落或逻辑段落分割
  3. 判断关系类型,为每个段落选择最适合的逻辑关系:
关系类型适用场景视觉特征
递进关系概念渐进发展、层层深入阶梯式排列,箭头从左到右或从上到下
流程关系步骤顺序、阶段推进线性/蛇形排列,带编号的节点
循环关系概念循环往复、闭环反馈环形排列,首尾相连
层次结构包含、从属、分类关系树形/金字塔/嵌套结构
对比关系对照、比较、优劣分析左右/上下对称排列
矩阵关系多维度交叉、复杂关联网格/象限布局
第二步:概念抽象
  1. 提取关键词:从每个段落中提取 2-6 个核心概念
  2. 精简文字:每个概念节点文字控制在 15 字以内
  3. 标注关系:概念之间的连接线和箭头标注简要说明
  4. 分层整理:区分主要概念和次要概念
第三步:生成 SVG 图

根据分析结果,使用本技能的设计规范生成 HTML 文件。

多段拆解规则:

  • 当文本包含多个独立逻辑段落时,生成多张 SVG 图
  • 每张图使用独立的 <div class="diagram-card"> 容器
  • 每张图上方标注段落标题或逻辑类型
  • 所有图按顺序排列在同一 HTML 文件中

设计系统

主题系统

支持深色和浅色主题切换,默认深色。

深色主题(默认)

融合 Cursor 暖色深底 + Claude 赭石强调色。告别冷蓝色调。

元素颜色
页面背景#141413 (温暖近黑)
卡片背景#1a1a18
节点填充主色#1e1e1c → #282825
节点描边#7a6e5e (暖棕)
主文字#faf9f5 (Ivory 暖白)
副文字#b0aea5 (暖银)
连接线rgba(38, 37, 30, 0.35)
箭头#8a8377
强调色#7a6e5e (暖棕), #c96442 (赭石)
浅色主题

融合 Claude 羊皮纸 + Cursor 暖面。

元素颜色
页面背景#f5f4ed (羊皮纸)
卡片背景#faf9f5 (Ivory)
节点填充主色#ebe9e2 → #e0ddd4
节点描边#8a7e6e (暖棕)
主文字#141413 (暖近黑)
副文字#5e5d59 (橄榄灰)
连接线#c8c5bc
箭头#8a8377
强调色#8a7e6e (暖棕), #c96442 (赭石)
字体规范
  • 全局使用 JetBrains Mono 等宽字体
  • 节点标题:14px,font-weight 600
  • 节点子标签:11px,font-weight 400
  • 连接线标注:10px
  • 段落标题:16px,font-weight 700
  • 图例文字:10px
SVG 规范
通用规范
  • 画布尺寸:每张图 viewBox 0 0 800 500,按需调整
  • 内边距:上下左右各留 40px
  • 箭头标记:小巧箭头,线宽 1
  • 阴影效果:轻微阴影 dx=1.5, dy=1.5, stdDeviation=2
节点样式
svg
<!-- 带阴影的圆角矩形节点 -->
<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>
连接线样式
svg
<!-- 标准连接线 -->
<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)"/>
关系类型视觉规范
递进关系
  • 从左到右阶梯式排列
  • 节点逐渐升高或尺寸逐渐增大
  • 箭头方向统一向右
  • 可用编号标注顺序(①②③)
  • 每层之间用浅色背景区分层级
流程关系
  • 线性排列或蛇形排列(超过 4 个节点时折行)
  • 每个节点带步骤编号(圆形徽章)
  • 连接线使用实线箭头
  • 起始节点用深色强调,结束节点用特殊样式
  • 分支点使用菱形节点
循环关系
  • 环形排列,首尾相连
  • 中心可放置核心概念
  • 连接线沿环形方向
  • 使用弧线连接而非直线
  • 箭头指向下一个节点
层次结构
  • 树形结构:根节点在上,子节点在下
  • 或金字塔结构:底部宽,顶部窄
  • 同级节点水平对齐
  • 父子关系用竖线连接
  • 可用嵌套矩形表示包含关系
对比关系
  • 左右对称布局
  • 中间用竖线或 VS 分隔
  • 左侧和右侧使用不同色调(如蓝色 vs 橙色)
  • 共同点放在中间或上方
  • 差异点分列两侧
矩阵关系
  • 网格布局(2×2、3×3 等)
  • 行列表头标注维度
  • 每个单元格内放置概念
  • 象限式分区(用浅色背景区分)
  • 对角线关系用特殊颜色标注
页面布局
  1. 页眉 - 标题 + 源文本简述 + 主题切换按钮
  2. 概览卡片 - 显示检测到的关系类型和概念数量
  3. 图表区域 - 多张 SVG 图按顺序排列,每张图带标题标签
  4. 页脚 - 元数据
多图排列模板
html
<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>

中文适配规则

  • 节点文字使用中文,技术术语保留英文
  • 中文字符宽度约为英文 2 倍,节点宽度按 14px × 字数 × 0.7 估算
  • 概念名称控制在 2-10 个汉字
  • 连接线标注使用 4-8 个汉字

输出要求

始终生成一个独立的 .html 文件,包含:

  • 内嵌 CSS(含主题变量)
  • 多张内联 SVG(按段落拆分)
  • 少量 JavaScript 用于主题切换
  • 文件可直接在浏览器中打开

© SpaceZephyr, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file (assets) in space-text-logic-diagram of SpaceZephyr/design-buddy.

  • SKILL.md
  • assets/template.html

Open the folder on GitHubat commit f1d835f

Compare with similar skills

Space Text Logic Diagram next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Space Text Logic Diagram compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Space Text Logic Diagram this skillSpaceZephyr/design-buddy176—~1kAutomated safety check: PassMIT
Diagram Makergarrytan/gstack136k—~4.1kAutomated safety check: NotesMIT
Diagram Makeropenclaw/openclaw392k2 repos~589Automated safety check: PassMIT
SVG Diagram GeneratorJimLiu/baoyu-skills27k1 repos~3.1kAutomated safety check: PassMIT
Space Text Logic DiagramSpaceZephyr/creator-buddy1.6k—~1.1kAutomated safety check: PassMIT
SVG DiagramsCopilotKit/OpenGenerativeUI2.1k—~3kAutomated safety check: PassMIT

Similar skills

  • Diagram Maker

    garrytan/gstack

    Turns an English description or Mermaid source into a diagram set: the source, an editable .excalidraw file and rendered SVG and PNG images.

    136k GitHub stars~4.1k tokensUpdated yesterday
    DevelopmentAuto-check: notes
  • Diagram Maker

    openclaw/openclaw

    Create SVG/HTML or Excalidraw diagrams for concepts, architecture, flows, and whiteboards.

    392k GitHub starsUsed in 2 repos~589 tokens
    DevelopmentAuto-check passed
  • SVG Diagram Generator

    JimLiu/baoyu-skills

    Creates standalone dark-themed SVG diagrams, including architecture, flowchart, sequence, structural, mind map, timeline and state machine types.

    27k GitHub starsUsed in 1 repo~3.1k tokens
    DevelopmentAuto-check passed
  • Space Text Logic Diagram

    SpaceZephyr/creator-buddy

    【公众号配图版】把公众号文章/段落拆成逻辑关系图,做成可直接放进公众号的配图。生成逻辑关系 SVG,默认输出独立 HTML(可本地预览、可截图导出 PNG),也可交给 Codex/workbuddy 内置出图模型出成图片。支持递进、流程、循环、层次、对比、矩阵六种关系。当用户给文章/段落/论述并要求生成逻辑图、关系图、配图、可视化时触发。支持中文,一次可拆多张。

    1.6k GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed
  • SVG Diagrams

    CopilotKit/OpenGenerativeUI

    Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts.

    2.1k GitHub stars~3k tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    48k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

More from SpaceZephyr/design-buddy

All 16 skills in this repo
  • Slide Deck Image Generator

    SpaceZephyr/design-buddy

    Turns written content into designed slide images from an outline, merges them into PPTX or PDF, and can borrow styles from a registry of brand design systems.

    176 GitHub stars~6.5k tokensUpdated 3 mo ago
    Auto-check passed
  • WeChat Article Layout

    SpaceZephyr/design-buddy

    Turns an article into WeChat Official Account HTML with a local preview, a choice of three visual styles and a button that copies the rich HTML.

    176 GitHub stars~1.2k tokensUpdated 3 mo ago
    Auto-check passed
  • Article Illustration Batch Generator

    SpaceZephyr/design-buddy

    Splits a Markdown article by heading, drafts an image prompt for each section, then generates diagrams with the Gemini API and embeds them in the note.

    176 GitHub stars~1k tokensUpdated 3 mo ago
    Auto-check passed
  • AI Chart Image Generator

    SpaceZephyr/design-buddy

    Generates a finished chart image directly with GPT-image-2 from a text description, across ten chart types such as flowcharts, architecture diagrams and SWOT grids in six visual styles.

    176 GitHub stars~1.6k tokensUpdated 3 mo ago
    Auto-check passed
  • Batch Image Skill Builder

    SpaceZephyr/design-buddy

    Walks a non-coder through structured questions about scene, style, color, text rules and consistency, then auto-generates a complete, ready-to-use batch image-generation skill.

    176 GitHub stars~1.3k tokensUpdated 3 mo ago
    Auto-check passed
  • Space Image Studio

    SpaceZephyr/design-buddy

    Generates PNG images for four common needs: Xiaohongshu covers, slide illustrations, charts and article logic diagrams, with twelve visual styles and automatic style suggestions.

    176 GitHub stars~2k tokensUpdated 3 mo ago
    Auto-check passed

Questions about Space Text Logic Diagram

What does Space Text Logic Diagram do?

将文本内容进行逻辑拆解,生成精准的逻辑关系 SVG 图。支持递进、流程、循环、层次、对比、矩阵六种关系类型。当用户提供文本段落、文章、论述内容并要求生成逻辑图、思维导图、关系图、流程图时触发。支持中文,一次可拆解多张图。. Space Text Logic Diagram is an agent skill from SpaceZephyr/design-buddy.

How do I install Space Text Logic Diagram in Claude Code?

Run `npx skills add SpaceZephyr/design-buddy --skill space-text-logic-diagram -a claude-code`. Or copy the skill folder (space-text-logic-diagram in SpaceZephyr/design-buddy) into .claude/skills/space-text-logic-diagram in your project. Claude Code loads it when a task matches its description.

How do I install Space Text Logic Diagram in Codex?

Run `npx skills add SpaceZephyr/design-buddy --skill space-text-logic-diagram -a codex`. Or copy the skill folder (space-text-logic-diagram in SpaceZephyr/design-buddy) into .agents/skills/space-text-logic-diagram in your project. Codex loads it when a task matches its description.

Can I use Space Text Logic Diagram in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add SpaceZephyr/design-buddy --skill space-text-logic-diagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/space-text-logic-diagram, .gemini/skills/space-text-logic-diagram, .github/skills/space-text-logic-diagram and .opencode/skills/space-text-logic-diagram in your project.

What does Space Text Logic Diagram need to run?

SKILL.md names no scripts, command-line tools or credentials: Space Text Logic Diagram is instructions for the agent only.

Does Space Text Logic Diagram access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Space Text Logic Diagram safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Space Text Logic Diagram use?

Space Text Logic Diagram is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Space Text Logic Diagram use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Space Text Logic Diagram?

Skills that share tags, products or a category with Space Text Logic Diagram: Diagram Maker (garrytan/gstack, 136k stars), Diagram Maker (openclaw/openclaw, 392k stars), SVG Diagram Generator (JimLiu/baoyu-skills, 27k stars) and Space Text Logic Diagram (SpaceZephyr/creator-buddy, 1.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Space Text Logic Diagram?

SpaceZephyr (a GitHub user) maintains it in SpaceZephyr/design-buddy, which has 176 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on July 6, 2026.

Source: SpaceZephyr/design-buddy on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.