Communitygithub.com

ASCII 图表构建师

生成通用、工具无关的 ASCII 图表和流程图,适用于代码注释或文档,遵循正式的“ASCII 图纸设计空间”(Hayatpur 等人,2024)。当用户要求“可视化”、“图表”、“流程图”或“映射”过程、数据结构或系统架构时使用。

ASCII 图表构建师 是什么?

该技能旨在帮助 AI 代理(如 Claude Code、Cursor、Codex)在纯文本环境中生成高质量、可移植的 ASCII 图表。它严格遵循 Hayatpur 等人 2024 年提出的“ASCII 图纸设计空间”理论,确保生成的图表在任何基本的文本编辑器(IDE、终端、Git)中都具有良好的可读性和一致性。技能围绕几个核心原则构建:工具无关性(不依赖特定渲染库)、信息邻近性(图表紧邻所描述的代码逻辑)、结构化符号(使用 `+`、`-`、`|`、`v`、`>` 等一致字符集定义边界和流程)。工作流程包括内容识别(确定图表类型:系统架构、数据结构或动态行为)和布局连接(采用盒线与箭头表示连接方向)。实现指南规定了统一的“盒子”标准(三层边框)和“连接器”标准(显式箭头表示方向),并支持在连接线上添加简短注释。此外,它还提供了约束条件,如避免使用非标准 Unicode 字符、保持等宽字符对齐以及控制图表宽度不超过80字符,以确保广泛兼容性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/juanmackie/juanskills/tree/HEAD/ascii-diagram-architect

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

ASCII 图表构建师 是做什么的?

这是一项专门技能,用于在代码注释或文档中生成高效、工具无关的 ASCII 图表和流程图,遵循正式的 《ASCII 图纸设计空间》(Hayatpur 等人,2024)。

触发指令

当用户要求时,使用此技能:

  • “可视化”
  • “图表”
  • “流程图”
  • “映射”

某个过程、数据结构或系统架构,使用纯文本。

在需要对逻辑或内存布局进行可视表示以提高清晰度的代码解释中激活。

核心原则

工具无关性

确保图表严格等宽,并能在任何基本文本编辑器(IDE、终端、Git)中读取。

信息邻近性

图表应作为 “视觉地图”,直接位于所描述的逻辑上方或旁边。

结构化符号

使用一致的字符集(+、-、|、v、>)定义边界和流向。

设计空间工作流程

基于 Hayatpur 等人的研究,在渲染前内部定义以下维度:

1. 内容识别

确定要表示的内容:

  • 系统架构:高级组件和网络。
  • 数据结构:内存布局、链表或树节点。
  • 动态行为:逐步逻辑或状态转换。

2. 布局与连接

  • 盒线与箭头:使用 +---+ 表示实体,使用 | 或 - 表示连接。
  • 流向:标准化为从上到下或从左到右。
  • 对齐:确保所有垂直管道 (|) 完美对齐以保持 *“盒子”*形状。

实现指南

“盒子”标准

始终使用三层边框来表示实体,以确保视觉上清晰:

+-----------------------+
|      实体名称          |
+-----------------------+

“连接器”标准

使用明确的箭头指示方向。不要使用模糊的线条。

  • 垂直:| 后跟 v
  • 水平:--- 后跟 >

注释

在连接器旁放置简短的描述性文本以解释转换或逻辑(例如,“如果 x > 0” 或 “API 调用”)。

示例工作流程:系统请求

输入: “展示负载均衡器如何将流量分发到三台服务器。”

输出:

          [ 客户端请求 ]
                  |
                  v
       +-----------------------+
       |      负载均衡器       |
       +----------+------------+
                  |
        +---------+---------+
        |         |         |
        v         v         v
    +-------+ +-------+ +-------+
    | 服务器1| | 服务器2| | 服务器3|
    +-------+ +-------+ +-------+

约束条件

  1. 不要使用非标准的 Unicode 字符(如 ┌ 或 ┐),除非用户明确要求,否则这些字符可能在某些终端环境或旧版编辑器中出错。
  2. 保持等宽:必须检查每一行的字符宽度一致性。
  3. 避免复杂:如果图表宽度超过 80 个字符,则将其拆分为 “子模块” 以确保适合标准 IDE 窗口。

相关技能