mcpField
E
excalidraw

excalidraw

github.com/rnjn设计与 UI7044 次安装42 周前更新
代码仓库

关于 excalidraw

excalidraw 是用于生成 Excalidraw JSON 格式手绘风格图表的 Skill，涵盖常见图形元素、样式和连接方式，适用于技术图表与规划图示。

主要功能

  1. 01创建 Excalidraw JSON 图表
  2. 02使用形状、文本、箭头和连接线
  3. 03通过颜色与线条选项设置样式
  4. 04组合并绑定相关元素

适用场景

  1. 01绘制流程图
  2. 02勾勒系统架构与数据流
  3. 03创建时序图和思维导图
  4. 04制作线框图或数据库图表

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rnjn/cc-excalidraw-skill --skill excalidraw

安装后在 Claude Code 中输入/excalidraw确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

examples.md
best-practices.md
diagram-patterns.md
element-reference.md

详细介绍

Excalidraw 图表创建

此技能可帮助你创建美观的手绘风格图表，并以 Excalidraw JSON 格式保存。

文件格式概述

Excalidraw 文件（.excalidraw）是具有以下结构的 JSON：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [],
  "appState": {
    "viewBackgroundColor": "#ffffff",
    "gridSize": null
  },
  "files": {}
}

快速入门 - 创建元素

每个元素至少需要：type、id、x、y 和样式属性。

最简矩形
{
  "type": "rectangle",
  "id": "rect-1",
  "x": 100,
  "y": 100,
  "width": 200,
  "height": 100,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 1234,
  "version": 1,
  "versionNonce": 1234,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "roundness": { "type": 3 }
}
文本元素
{
  "type": "text",
  "id": "text-1",
  "x": 120,
  "y": 130,
  "width": 160,
  "height": 25,
  "text": "Hello World",
  "fontSize": 20,
  "fontFamily": 1,
  "textAlign": "center",
  "verticalAlign": "middle",
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 5678,
  "version": 1,
  "versionNonce": 5678,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false,
  "containerId": null,
  "originalText": "Hello World",
  "autoResize": true,
  "lineHeight": 1.25
}
箭头元素
{
  "type": "arrow",
  "id": "arrow-1",
  "x": 300,
  "y": 150,
  "width": 100,
  "height": 0,
  "points": [[0, 0], [100, 0]],
  "startArrowhead": null,
  "endArrowhead": "arrow",
  "startBinding": null,
  "endBinding": null,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "seed": 9012,
  "version": 1,
  "versionNonce": 9012,
  "isDeleted": false,
  "groupIds": [],
  "boundElements": null,
  "link": null,
  "locked": false
}

元素类型

类型用途
rectangle方框、容器、卡片
ellipse圆形、椭圆、节点
diamond决策点、条件
text标签、描述
arrow连接、流程方向
line不带箭头的连接线
freedraw手绘路径
image嵌入图像
frame对元素进行分组或框定

配色方案（推荐）

背景
  • #a5d8ff - 浅蓝色
  • #b2f2bb - 浅绿色
  • #ffec99 - 浅黄色
  • #ffc9c9 - 浅红色／粉色
  • #e9ecef - 浅灰色
  • #d0bfff - 浅紫色
  • #99e9f2 - 浅青色
描边
  • #1e1e1e - 默认黑色
  • #1971c2 - 蓝色
  • #2f9e44 - 绿色
  • #f08c00 - 橙色
  • #e03131 - 红色
  • #9c36b5 - 紫色

样式属性

属性值描述
fillStyle"solid"、"hachure"、"cross-hatch"填充图案
strokeWidth1、2、4线条粗细
strokeStyle"solid"、"dashed"、"dotted"线条样式
roughness0、1、2手绘效果（0=平滑，2=粗糙）
opacity0-100透明度
roundness{ "type": 3 }圆角

使用箭头连接元素

要用箭头连接形状，请使用绑定：

{
  "type": "arrow",
  "id": "arrow-1",
  "startBinding": {
    "elementId": "rect-1",
    "focus": 0,
    "gap": 5
  },
  "endBinding": {
    "elementId": "rect-2",
    "focus": 0,
    "gap": 5
  },
  "points": [[0, 0], [200, 0]]
}

还要为连接的形状添加 boundElements：

{
  "type": "rectangle",
  "id": "rect-1",
  "boundElements": [{ "id": "arrow-1", "type": "arrow" }]
}

字体系列

值字体
1手绘风格（Virgil）
2常规（Helvetica）
3代码（Cascadia）

最佳实践

  1. 生成唯一 ID - 使用 rect-1、arrow-2、text-header 等描述性前缀
  2. 使用随机种子 - 每个元素都需要唯一的 seed，以确保渲染一致
  3. 合理安排元素间距 - 元素间留出 50-100px
  4. 对齐元素 - 使用一致的 x/y 坐标，确保视觉对齐
  5. 将相关项目分组 - 使用匹配的 groupIds 数组
  6. 使用配色方案 - 统一使用 Excalidraw 内置颜色

可创建的图表类型

类型描述
流程图流程、算法、决策树
时序图API 调用、用户交互、消息流
架构图系统设计、微服务、基础设施
思维导图头脑风暴、概念映射、创意整理
数据流图数据流动、系统分析
ERD数据库架构、实体关系
线框图UI 模型、布局草图

参考文档

绘制精美图表的快速提示

  1. 正式／技术图表使用 roughness: 0，友好的草图使用 roughness: 1
  2. 专业风格使用 fontFamily: 2（Helvetica）；仅在需要休闲风格时使用 fontFamily: 1（Virgil）
  3. 保持间距一致 - 主要元素间距为 100px，相关项目间距为 50px
  4. 颜色含义 - 蓝色表示信息／输入，绿色表示成功／数据，黄色表示决策，红色表示错误
  5. 箭头约定 - 实线表示操作，虚线表示响应／异步

评论

支持 Markdown