OpenClaw

excalidraw

Generate hand-drawn style diagrams, flowcharts, and architecture diagrams as PNG images from Excalidraw JSON

a-anand-911190 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install a-anand-91119/excalidraw

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Excalidraw Diagram Generator

Generate beautiful hand-drawn style diagrams rendered as PNG images.

Workflow

Generate JSON — Write Excalidraw element array based on what the user wants
Save to file — Write JSON to /tmp/<name>.excalidraw
Render — node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png
Send — Send the PNG via message tool with filePath

Quick Reference

node <skill_dir>/scripts/render.js input.excalidraw output.png

Element Types

Type	Shape	Key Props
`rectangle`	Box	x, y, width, height
`ellipse`	Oval	x, y, width, height
`diamond`	Decision	x, y, width, height
`arrow`	Arrow	connects shapes (see Arrow Binding below)
`line`	Line	x, y, points: [[0,0],[dx,dy]]
`text`	Label	x, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code)

Styling (all shapes)

{
  "strokeColor": "#1e1e1e",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "hachure",
  "strokeWidth": 2,
  "roughness": 1,
  "strokeStyle": "solid"
}

fillStyle: hachure (diagonal lines), cross-hatch, solid roughness: 0=clean, 1=hand-drawn (default), 2=very sketchy

Arrow Binding (IMPORTANT)

Always use from/to bindings for arrows. The renderer auto-calculates edge intersection points — no manual coordinate math needed.

Simple arrow (straight, between two shapes)

{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}

That's it. No x, y, or points needed. The renderer computes start/end at shape edges.

Multi-segment arrow (routed path with waypoints)

For arrows that need to go around obstacles, use absolutePoints with intermediate waypoints:

{
  "type":"arrow","id":"a2","from":"box3","to":"box1",
  "absolutePoints": true,
  "points": [[375,500],[30,500],[30,127],[60,127]],
  "strokeColor":"#1e1e1e","strokeWidth":2,"roughness"...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/a-anand-91119/excalidraw
Version: —
Commit: 980b669cd9ed3f67329e070cc931ec729ba513f1
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Excalidraw Diagram Generator

Generate beautiful hand-drawn style diagrams rendered as PNG images.

## Workflow

1. **Generate JSON** — Write Excalidraw element array based on what the user wants
2. **Save to file** — Write JSON to `/tmp/<name>.excalidraw`
3. **Render** — `node <skill_dir>/scripts/render.js /tmp/<name>.excalidraw /tmp/<name>.png`
4. **Send** — Send the PNG via message tool with `filePath`

## Quick Reference

```bash
node <skill_dir>/scripts/render.js input.excalidraw output.png
```

## Element Types

| Type | Shape | Key Props |
|------|-------|-----------|
| `rectangle` | Box | x, y, width, height |
| `ellipse` | Oval | x, y, width, height |
| `diamond` | Decision | x, y, width, height |
| `arrow` | Arrow | connects shapes (see Arrow Binding below) |
| `line` | Line | x, y, points: [[0,0],[dx,dy]] |
| `text` | Label | x, y, text, fontSize, fontFamily (1=hand, 2=sans, 3=code) |

### Styling (all shapes)

```json
{
  "strokeColor": "#1e1e1e",
  "backgroundColor": "#a5d8ff",
  "fillStyle": "hachure",
  "strokeWidth": 2,
  "roughness": 1,
  "strokeStyle": "solid"
}
```

**fillStyle**: `hachure` (diagonal lines), `cross-hatch`, `solid`
**roughness**: 0=clean, 1=hand-drawn (default), 2=very sketchy

## Arrow Binding (IMPORTANT)

**Always use `from`/`to` bindings for arrows.** The renderer auto-calculates edge intersection points — no manual coordinate math needed.

### Simple arrow (straight, between two shapes)
```json
{"type":"arrow","id":"a1","from":"box1","to":"box2","strokeColor":"#1e1e1e","strokeWidth":2,"roughness":1}
```
That's it. No x, y, or points needed. The renderer computes start/end at shape edges.

### Multi-segment arrow (routed path with waypoints)
For arrows that need to go around obstacles, use `absolutePoints` with intermediate waypoints:
```json
{
  "type":"arrow","id":"a2","from":"box3","to":"box1",
  "absolutePoints": true,
  "points": [[375,500],[30,500],[30,127],[60,127]],
  "strokeColor":"#1e1e1e","strokeWidth":2,"roughness"...

搜索