Agent skill

Space Text Logic Diagram

by SpaceZephyr in SpaceZephyr/creator-buddy

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

MITAuto-check passed

Install Space Text Logic Diagram

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

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

GitHub CLI
$ gh skill install SpaceZephyr/creator-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/creator-buddy.git skills-src && mkdir -p .claude/skills && cp -r skills-src/gzh-Skills/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
1.6k
Token cost
~1.1k tokens
SKILL.md length
311 words
Files
2 (incl. assets)
Skills in repo
31
Repo updated
First seen
Licence
MIT

At a glance

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

  • Works in 3 steps: 通读全文,识别文本中的核心论点、关键概念和逻辑链条 → 段落拆解,将文本按自然段落或逻辑段落分割 → 判断关系类型,为每个段落选择最适合的逻辑关系
  • SKILL.md covers 公众号配图适配, 触发条件, 工作流程 and 设计系统, plus 2 more sections
  • 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/creator-buddy. 【公众号配图版】把公众号文章/段落拆成逻辑关系图,做成可直接放进公众号的配图。生成逻辑关系 SVG,默认输出独立 HTML(可本地预览、可截图导出 PNG),也可交给 Codex/workbuddy 内置出图模型出成图片。支持递进、流程、循环、层次、对比、矩阵六种关系。当用户给文章/段落/论述并要求生成逻辑图、关系图、配图、可视化时触发。支持中文,一次可拆多张。

Its SKILL.md is about 1.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: Creator Buddy: orchestrated Agent Skills for cross-platform content search, creator analysis, and viral trend research. 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 edf46c5. 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 1.1k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 311 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
When it runs · the whole SKILL.md, loaded when a task matches
~1.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/creator-buddy at commit edf46c5, republished under its MIT licence (© SpaceZephyr). 311 words, ~1,127 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,默认输出独立 HTML(可本地预览、可截图导出 PNG),也可交给 Codex/workbuddy 内置出图模型出成图片。支持递进、流程、循环、层次、对比、矩阵六种关系。当用户给文章/段落/论述并要求生成逻辑图、关系图、配图、可视化时触发。支持中文,一次可拆多张。
license
MIT
metadata.version
1.1
metadata.author
Text Logic Diagram Skill

文本逻辑关系图

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

公众号配图适配

定位:公众号配图工具。用户给一段内容(文章 / 段落 / 论述),你把它的逻辑拆成图,做成可直接放进公众号的配图。

两种出图方式:

  • HTML 出图(本 Skill 主路径):生成自包含 HTML(内含 SVG),可本地预览;要图片时对预览截图导出 PNG。
  • 模型出图:把拆好的逻辑结构 + 风格描述交给当前环境内置出图模型出 PNG——Codex 用内置 image_gen/image2,workbuddy 用其出图模型。适合要「手绘/插画感」而非精确 SVG 时。

公众号常用尺寸:正文配图 16:9 或 3:2|方图 1:1|头图 2.35:1。生成 HTML 时画布按此比例。

输出:默认存用户图片目录,命名 MMDD-主题.html 或 .png。

触发条件

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

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

工作流程

第一步:文本分析
  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 gzh-Skills/space-text-logic-diagram of SpaceZephyr/creator-buddy.

  • SKILL.md
  • assets/template.html

Open the folder on GitHubat commit edf46c5

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/creator-buddy1.6k—~1.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
SVG DiagramsCopilotKit/OpenGenerativeUI2.1k—~3kAutomated safety check: PassMIT
Diagram Designcathrynlavery/diagram-design48k1 repos~7.6kAutomated 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 today
    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
  • SVG Diagrams

    CopilotKit/OpenGenerativeUI

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

    2.1k GitHub stars~3k tokensUpdated today
    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
  • SVG Diagram

    bybit-exchange/svg-diagram

    SVG diagramming conventions blending a technical look with CJK-friendly typography.

    615 GitHub stars~6.6k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from SpaceZephyr/creator-buddy

All 31 skills in this repo
  • WeChat Hot Article Analysis

    SpaceZephyr/creator-buddy

    Fetches hot WeChat Official Account articles by sector or keywords and produces a data file and an HTML report with rankings, style patterns and writing references.

    1.6k GitHub stars~847 tokensUpdated 1 mo ago
    Auto-check passed
  • Xiaohongshu Multi-Page HTML Cards

    SpaceZephyr/creator-buddy

    Turns an article, SOP, or tutorial into a self-contained, multi-page 3:4 HTML deck of image cards meant to be screenshotted page by page.

    1.6k GitHub stars~928 tokensUpdated 1 mo ago
    Auto-check passed
  • WeChat Viral Article Finder

    SpaceZephyr/creator-buddy

    Finds recent viral WeChat official account articles for a niche keyword and shows up to ten picks as cards, for topic research and benchmarking.

    1.6k GitHub stars~848 tokensUpdated 1 mo ago
    Auto-check passed
  • Draws chart images such as flowcharts, architecture diagrams, ER diagrams and SWOT boards for WeChat official account articles, in one of six visual styles.

    1.6k GitHub stars~1.7k tokensUpdated 1 mo ago
    Auto-check passed
  • WeChat Article Cover Maker

    SpaceZephyr/creator-buddy

    Creates a 2.35:1 header cover for a WeChat official account article with image generation, keeping the headline inside the area that survives sharing crops.

    1.6k GitHub stars~1.5k tokensUpdated 1 mo ago
    Auto-check passed
  • Video Voiceover and Music Mixer

    SpaceZephyr/creator-buddy

    Adds sound to a finished video: generates narration from a script with TTS, finds royalty-free background music, and mixes everything together with ffmpeg.

    1.6k GitHub stars~615 tokensUpdated 1 mo ago
    Auto-check passed

Questions about Space Text Logic Diagram

What does Space Text Logic Diagram do?

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

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

Run `npx skills add SpaceZephyr/creator-buddy --skill space-text-logic-diagram -a claude-code`. Or copy the skill folder (gzh-Skills/space-text-logic-diagram in SpaceZephyr/creator-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/creator-buddy --skill space-text-logic-diagram -a codex`. Or copy the skill folder (gzh-Skills/space-text-logic-diagram in SpaceZephyr/creator-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/creator-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 1.1k tokens (SKILL.md is roughly 4.5k 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 SVG Diagrams (CopilotKit/OpenGenerativeUI, 2.1k 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/creator-buddy, which has 1,613 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on August 26, 2026.

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