scibox-diagram

Original：🇨🇳 Chinese

Translated

7 scriptsChecked / no sensitive code detected

Create and modify editable draw.io / diagrams.net diagrams (.drawio XML), output .drawio + PNG/PDF. Three approaches: use built-in templates (5-band technology roadmap, 3-column research framework diagram, 3-column stage flow chart, horizontal task pipeline diagram), write XML from scratch, high-fidelity replication of reference diagrams. Use this when users request technology roadmaps, full-text overviews, research framework diagrams, paper flowcharts, algorithm flowcharts, model/system architecture diagrams, method schematics, turning papers or projects into a single diagram, defense diagrams, or request to draw drawio diagrams, redraw a reference diagram into an editable vector diagram, or fix diagrams (text overflow/arrow misalignment/inconsistent color scheme/misaligned layout). For line charts, heatmaps and other data charts, please use scibox-figure instead.

2installs

Sourcejihe520/sci-box

Added on2026-08-23

NPX Install

npx skill4agent add jihe520/sci-box scibox-diagram

SKILL.md Content (Chinese)

View Translation Comparison →

Research and Paper Diagrams (draw.io)

The main output is editable .drawio files, with PNG/PDF as supplementary exports. Templates, manual authoring, replication, validation, preview, and export are all handled within this directory.

First Determine Which Approach to Take

Scenario	Approach	Entry Point
Full-text context, research framework, execution flow, or task breakdown of a project	A. Use Templates	Template Index below
Other schematics: algorithm flow, model architecture, experimental design, mechanism illustration…	B. Write XML from Scratch	`references/authoring.md`
Given a reference diagram, need to redraw it into an editable vector diagram	C. High-Fidelity Replication	`references/replication.md`

The XML syntax is consistent across all three approaches, and outputs can be modified further interchangeably; the only difference lies in the strictness of the process discipline.

A. Use Templates

Template ID	Layout	Suitable for Expressing	Description
`roadmap-5band`	954×1296 vertical layout, five dotted bands + left flag label + right vertical label	Problem proposal → Data and indicators → Methods and mechanisms → Result comparison → Evaluation and promotion	`references/roadmap-5band.md`
`framework-3col`	1026-width 3-column layout, left stage chain / middle content blocks / right method list, height adaptive	Panoramic view of research content: which research content corresponds to each stage and what methods are used	`references/framework-3col.md`
`stageflow-3col`	1000-width 3-column layout, middle column with solid color title bars per block + independent color schemes, height adaptive	Execution flow of research/system: stage progression, decision branches, result distribution	`references/stageflow-3col.md`
`taskflow-land`	Horizontal 1360-width layout, multiple task blocks with internal pipelines + detailed methods attached to each step	Break down projects into "Task 1…Task 4", with clear methods and conclusions for each step; suitable for 16:9 aspect ratio	`references/taskflow-land.md`

Read the two sections in the template documentation: Semantic Conventions (which slots are parallel, which converge, which two groups must be comparable) and Word Count Budget. Misplacing semantics is more serious than exceeding the word count limit.
Extract content from user materials, do not invent content; verify values one by one when source files (
```
.tex
```
/
```
.md
```
/code) are available, use original terminology.
Copy and rewrite
```
assets/<template_id>/example.json
```
, use
```
"\n"
```
for manual line breaks.
Render (check word count per slot before writing the file, report specific budget if exceeded):

bash

python3 scripts/roadmap_5band.py content.json -o out.drawio     # Template roadmap-5band
python3 scripts/framework_3col.py content.json -o out.drawio    # Template framework-3col
python3 scripts/stageflow_3col.py content.json -o out.drawio    # Template stageflow-3col
python3 scripts/taskflow_land.py  content.json -o out.drawio    # Template taskflow-land (horizontal)

For adding new templates, see

references/adding-templates.md

.

B. Write XML from Scratch

Read

references/authoring.md

: skeleton, style quick reference, Chinese character width budget, connector syntax, four common pitfalls. For icons and special shapes, see

references/icons.md

.

Three key points to avoid mistakes:

Set up the grid first before adding shapes: Fix the canvas, column baselines, and step sizes; elements in the same group should have the same width and step size, use equal division formulas for groups with variable quantities.
Manual line breaks for Chinese text: Full-width characters ≈ font size, half-width characters ≈ font size/2, line height ≈ font size+3; for a 16px font size, a 160px-wide box can hold a maximum of 9 Chinese characters per line. For vertical layout, stack characters with
```
&lt;br&gt;
```
one by one, do not use
horizontal=0
(Chinese characters will be rotated incorrectly).
Connector endpoints should be 1px away from box edges; draw one-to-many/many-to-one connections as "vertical line + horizontal bus + branches" instead of N independent diagonal lines.

Before drawing, clarify the semantics of each arrow (who points to whom, one-way or two-way, fan-in or fan-out); do not draw arrows whose meaning cannot be explained.

C. High-Fidelity Replication

This approach requires an additional evidence chain, follow

references/replication.md

, key points:

Calibrate first before drawing: Extract box coordinates and fill colors via connected components, find frame lines via row-column scanning, collect color schemes via color census, infer font size by measuring character width. Do not estimate by eye, and do not assume "titles must be larger than body text".
Four intermediate outputs:
```
visual-spec.md
```
(what is observed),
```
layout-grid.md
```
(coordinate plan),
```
asset-ledger.md
```
(which elements are approximated to prevent accidental loss),
```
defect-log.md
```
(only add entries after the first screenshot, no modifications).
≥3 rounds of "screenshot → 9-region inventory → fix all P0/P1 issues → re-render → verify item by item"; screenshots must be of the canvas itself.
Red team review + self-assessment scorecard (see
```
references/self-check.md
```
): Do not deliver if total score <40 or any dimension ≤4.
Use pixel difference to locate remaining discrepancies, record each item in
```
defect-log.md
```
, do not write "perfectly restored".

General: Validation, Preview, Export

bash

python3 scripts/check_layout.py fig.drawio      # Check overflow/out-of-bounds/duplicate IDs/overlapping/box penetration/bitmaps (use --strict as gatekeeping)
python3 scripts/export_figure.py fig.drawio     # Export 1:1 PNG + vector PDF (requires drawio command line)
python3 scripts/preview_html.py fig.drawio      # Preview in browser, no drawio command line required

check_layout

uses a Chinese character width model with low noise; a normal diagram should FAIL 0 / WARN 0; any alerts deserve careful attention. It intentionally does not check tightly stacked row/column spacing and alignment of same-group element sizes (the former is intentional layout, the latter will inevitably have false positives when the machine judges groups) — these two items are checked manually. For detailed rules and four avoidance techniques, see

references/preflight-rules.md

.

The diagram is not considered complete without checking the rendered version: Text overflow, arrow overlapping text, and squashed boxes cannot be seen in XML. Review the PNG at least twice: ① Text overflow/line crossing; ② Arrow direction and semantics; ③ Alignment and uniform width of same-group elements; ④ Whether values are copied correctly. For the complete 9-region inventory and delivery checklist, see

references/self-check.md

.

Deliver

.drawio

+ PNG/PDF; when using the template approach, retain the content JSON as a reproducible source. Size reminder: A diagram with 954px width and 16px font size compressed to A4 body text

0.97\textwidth

is approximately 6.5pt, it is recommended to use full-page horizontal layout for defense, create a simplified version for small in-text diagrams.

Reference Index

File	When to Read
`authoring.md`	For manual diagram authoring: skeleton, style snippets, character width budget, connectors
`icons.md`	When needing icons, flags, block arrows, curved arrows and other special shapes
`roadmap-5band.md`	When using the 5-band roadmap template
`framework-3col.md`	When using the 3-column research framework template (content panorama)
`stageflow-3col.md`	When using the 3-column stage flow template (execution flow)
`taskflow-land.md`	When using the horizontal task pipeline template
`adding-templates.md`	When adding a new template
`replication.md`	For replicating reference diagrams: calibration methods, four outputs, iterative loop
`self-check.md`	9-region inventory, red team review, self-assessment scorecard, delivery checklist
`preflight-rules.md`	What static checks are looking for, how to avoid false positives

Not Applicable

Line charts, heatmaps, statistical charts and other data charts → Use the
```
scibox-figure
```
skill;
Formula derivation chains requiring LaTeX typesetting → Use TikZ or include in the main text.