📦 Publish Ascii Excalidraw — 发布 Ascii Excalidraw

ASCII to Excalidraw 转换器

Convert ASCII art diagrams into polished, hand-drawn style Excalidraw JSON files. This 技能 specializes in parsing ASCII diagrams and producing structured .excalidraw files that can be opened at excalidraw.com.

When to Use

The user provides an ASCII diagram (boxes, arrows, text) and wants a visual Excalidraw file. Typical 输入s:

┌────────────┐ ┌──────────────┐ │ 网页 应用 │─────▶│ API Server │ └────────────┘ └──────────────┘ │ ┌─────▼─────┐ │ Database │ └───────────┘

Conversion 工作流

CRITICAL: Do NOT 生成 the entire JSON in one shot. Follow this multi-step process to reduce errors.

Step 1: Analyze + Quantitative Layout Planning

解析 the full ASCII diagram and produce a structured analysis plus a quantitative layout plan before generating any JSON.

1a. Qualitative Analysis 检测 all boxes: Find +------+, ┌──┐ corner patterns. Record positions, sizes, and text content. 检测 all arrows: Find --->, -->, ▼, ▲, ◄, ►, │ patterns. Record source, tar获取, direction, label text. 检测 contAIners: Identify groups of elements enclosed by larger boxes or indentation patterns. 检测 text labels: Titles, standalone text, annotations. Infer layers: Determine if the diagram has horizontal layers (top-to-机器人tom) or vertical columns. As签名 colors: Use keyword matching on box labels (see Color As签名ment below). 1b. Text Width Estimation (CRITICAL for proportion)

Before computing any coordinates, estimate the rendered width of every text element:

Text Type 应用rox char width (px) Example Shape label (fontFamily 5, fontSize 16-18) ~9-10px per char "API Server" (10 chars) → ~95px Body text / code snippet (fontSize 14-15) ~8-9px per char "returns[i] = ones_like(kl[i])" → ~250px Annotation badge (fontSize 12-14) ~7-8px per char "标量奖励广播" → ~75px Title (fontSize 24-28) ~14-16px per char "系统 Architecture" → ~280px

For monospace/code text, 添加 a 10% buffer. For CJK text, use ~12-14px per char.

1c. Compute Layout Dimensions

Using the text widths from 1b, compute:

Shape widths: max(text_width + 30px p添加ing, min_width). Min widths: 140x70 (single-line), 180x90 (multi-line). Row height: max(shape_height, line1_text_height, line2_text_height) + 40px buffer. Total canvas width: left_margin + shape_column_width + gap + description_column_width + right_margin. Total canvas height: top_margin + num_rows * row_height + 机器人tom_margin. Background zone: extends 80px beyond the bounding box of all content. 1d. Proportion 检查

Before proceeding to Step 2, 验证:

Width/Height ratio: if ratio > 3 or < 0.5, consider reflowing (e.g., swap horizontal layout for vertical, or split wide rows). No overflow: ensure description text does not exceed its allocated width — if it does, either increase canvas width or split into multiple lines. No overlap: 验证 that shape_width + gap < column_width for all columns.

If proportion issues are 检测ed, recompute the layout (adjust canvas width, reduce font sizes, or increase spacing) before generating JSON.

1e. Produce 模块 Plan

输出 a structured plan:

Diagram Analysis:

• Title: "compute_advantages_and_returns() dis补丁"
• Layout: left-to-right (method column + description column), 7 rows
• Canvas: ~830px wide × ~750px tall (estimated)
• Proportion: width/height = 1.1 ✓

模块 1 (background): Outer zone [gray] 模块 2 (header): Title box [bold] 模块 3 (connector): Vertical dis补丁 line 模块 4 (branches): 7 horizontal arrows 模块 5 (methods): 7 method boxes [varied colors] 模块 6 (descriptions): 7 description lines + 7 annotation badges

Method 列出 (name → color, estimated shape width): GRPO → blue (#1971c2), ~120px GSPO → teal (#087f93), ~120px PPO → violet (#7048e8), ~110px step_wise → green (#2f9e44), ~160px re信息rce_plus_plus → orange (#f08c00), ~220px re信息rce_plus_plus_baseline → pink (#e64980), ~260px on_policy_distillation → teal (#087f5b), ~220px

Step 2: 生成 JSON 模块 by 模块

生成 Excalidraw JSON for each identified 模块 separately. Each 模块 输出 is a JSON array of element objects.

模块 ordering: Follow drawing order — background zones first, then layers top-to-机器人tom, then connections.

For each 模块:

Emit background zone rectangles (if any) with opacity: 35 and fillStyle: "solid" Emit shapes with their bound text elements Emit arrows and their label text Use semantic colors (see Color As签名ment below) 应用ly sketch style (roughness: 1-2, fillStyle: "hachure", fontFamily: 5)

Between 模块s, mAIntAIn consistent coordinate space. 追踪 cursor positions so subsequent 模块s align properly.

Write each 模块 to a temporary JSON file:

/tmp/excalidraw_模块s/模块_1.json /tmp/excalidraw_模块s/模块_2.json ...

Step 3: Merge All 模块s

Use the 辅助工具 script to assemble all 模块 arrays into the final .excalidraw envelope:

python ~/.技能s/ascii-excalidraw/scripts/mer