{"id":"38212bff-db60-4f27-889a-2505950babbf","slug":"codex-paper-figure-skill","kind":"skill","name":"codex-paper-figure-skill","summary":"Codex skill that turns paper text into editable draw.io academic figures: drafts a visual reference with image_gen, then rebuilds it as native .drawio XML with editable labels, shapes, arrows, and ico","owner":"pengqianhan","repoUrl":"https://github.com/pengqianhan/codex-paper-figure-skill","license":"MIT","licenseTier":"permissive","trust":"community","stars":19,"match":null,"fewStars":false,"format":"skill","createdAt":"2026-05-28T22:16:19.000Z","addedAt":"2026-10-14T06:08:30.872Z","logoUrl":"https://avatars.githubusercontent.com/u/4286531?u=334c51fcec518e2b8a38135470bd8c62026f8a1f&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["design-media","data-analytics"],"tags":["academic-figures","ai-for-science","codex","diagram-generation","diagrams-net","drawio","graphical-abstract","image-generation"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-17T07:41:18.153Z","sample":false,"url":"https://conduits.dev/tools/codex-paper-figure-skill","language":"","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# codex-paper-figure-skill\n\n[中文 README](README_zh.md)\n\n![codex-paper-figure-skill overview](assets/repo-hero.png)\n\nA Codex skill for turning paper sections, method descriptions, and figure concepts into editable draw.io academic figures.\n\n`codex-paper-figure-skill` takes natural-language scientific content, uses Codex `image_gen` to explore a visual reference, and then rebuilds the final result as a native `.drawio` diagram. The main output is not a flattened PNG: readers can open the `.drawio` file later and edit labels, shapes, arrows, groups, layout, colors, and icon elements directly in draw.io / diagrams.net.\n\n**Editable-first output:** the generated `.drawio` file is the primary deliverable. Raster images are used only as references or previews unless you explicitly request otherwise.\n\n## Features\n\n- Generate paper-style workflow diagrams, mechanism figures, model architecture figures, experimental design diagrams, and graphical abstract drafts from manuscript text.\n- Use `image_gen` for composition exploration, then recreate the final figure as editable draw.io XML.\n- Keep scientific labels, shapes, arrows, groups, and icons editable in draw.io instead of flattening them into a single raster image.\n- Use Codex built-in `Browser` to search Flaticon when icon-assisted figures are useful.\n- Produce `.drawio` as the primary artifact, so readers can keep refining the figure after generation; PDF/SVG/PNG exports are optional presentation formats.\n\n## Requirements\n\nRequired:\n\n- [Codex](https://openai.com/codex/) with local skill support.\n- Codex `image_gen`, used to generate the raster reference image.\n\nOptional:\n\n- Codex built-in `Browser`, used when the figure needs icons from [Flaticon](https://www.flaticon.com/).\n- [draw.io / diagrams.net](https://www.drawio.com/) for opening and editing generated `.drawio` files.\n- draw.io Desktop, recommended on macOS and useful on Windows/Linux, because it provides a local app and CLI that Codex can use to export PDF/SVG/PNG automatically.\n\nThe diagrams.net web app at [app.diagrams.net](https://app.diagrams.net/) can open, edit, and manually export `.drawio` files. It is enough for editing. For automated PDF/SVG/PNG rendering from Codex, install draw.io Desktop.\n\n## Quick Start\n\nUse the skill directly from this repository:\n\n```text\n[$codex-paper-figure-skill](./codex-paper-figure-skill/SKILL.md)\n\nCreate an editable draw.io academic figure from the paper text below:\n<paste a paper section, methods paragraph, results summary, or figure idea>\n```\n\nExpected output:\n\n- A generated reference image from `image_gen`.\n- An editable `.drawio` file that can be reopened and modified in draw.io / diagrams.net.\n- Optional preview/export files if requested and supported by the local environment.\n\n## Installation\n\nYou can use this skill in either of two ways.\n\n### Option 1: Reference It From This Repository\n\nKeep the repository as-is and explicitly reference the skill file in Codex:\n\n```text\n[$codex-paper-figure-skill](./codex-paper-figure-skill/SKILL.md)\n```\n\nThis is the simplest way to test the skill and reproduce the examples.\n\n### Option 2: Install It As A Local Codex Skill\n\nCopy the skill folder into your Codex skills directory:\n\n```text\n<Codex skills directory>/\n└── codex-paper-figure-skill/\n    ├── SKILL.md\n    └── agents/\n        └── openai.yaml\n```\n\nOnly copy the inner `codex-paper-figure-skill/` folder. The repository-level `outputs/` directory contains examples and is not required for installation.\n\n## Repository Structure\n\n```text\ncodex-paper-figure-skill/\n├── assets/\n│   └── repo-hero.png\n├── codex-paper-figure-skill/\n│   ├── SKILL.md\n│   └── agents/\n│       └── openai.yaml\n├── LICENSE\n├── outputs/\n│   ├── multimodal-gnn/\n│   │   ├── demo-multimodal-gnn-reference.png\n│   │   └── demo-multimodal-gnn.drawio\n│   └── icon-crispr/\n│       ├── demo-icon-crispr-reference.png\n│       ├── demo-icon-crispr-preview.png\n│       ├── demo-icon-crispr-preview.svg\n│       └── demo-icon-crispr.drawio\n└── README.md\n```\n\n## How It Works\n\n1. Parse the input into a figure brief: scientific message, entities, relationships, required labels, layout constraints, and output format.\n2. Use Codex `image_gen` to generate a raster reference for layout, style, and visual hierarchy.\n3. Rebuild the figure as native draw.io mxGraphModel XML.\n4. Keep labels, shapes, arrows, groups, and icon elements editable in draw.io.\n5. Validate the `.drawio` XML for required root cells and parseability.\n6. Export PDF/SVG/PNG only when requested and when draw.io Desktop CLI is available.\n\n## Outputs\n\nThe skill prioritizes editable output:\n\n| Output | Purpose |\n| --- | --- |\n| `.drawio` | Primary editable figure artifact. Open it later in draw.io / diagrams.net to edit text, shapes, arrows, layout, and styling. |\n| `*-reference.png` | Raster reference generated by `image_gen`; used for composition, not as the final editable figure. |\n| `*-preview.png` / `*-preview.svg` | Optional visual preview for README, review, or sharing. |\n| `.drawio.pdf` / `.drawio.svg` / `.drawio.png` | Optional draw.io Desktop CLI exports when available. |\n| `icons/` | Optional folder for downloaded icon assets when external icons are used. |\n\n## Examples\n\n| Example | Reference | Editable Output | Preview | Notes |\n| --- | --- | --- | --- | --- |\n| Multimodal GNN pipeline | [PNG](outputs/multimodal-gnn/demo-multimodal-gnn-reference.png) | [draw.io](outputs/multimodal-gnn/demo-multimodal-gnn.drawio) | - | Native draw.io shapes only; no external icons. |\n| Icon-assisted CRISPR screen | [PNG](outputs/icon-crispr/demo-icon-crispr-reference.png) | [draw.io](outputs/icon-crispr/demo-icon-crispr.drawio) | [PNG](outputs/icon-crispr/demo-icon-crispr-preview.png), [SVG](outputs/icon-crispr/demo-icon-crispr-preview.svg) | Uses Flaticon icon image cells. |\n\n### Multimodal GNN Pipeline\n\nExample input:\n\n```text\nA multimodal analysis pipeline integrates raw microscopy images and gene-expression tables. Images are segmented into cell instances, expression profiles are normalized, a graph neural network combines morphology and molecular features, and the model outputs cell-state predictions with uncertainty scores. Results are validated against expert annotations and summarized as biomarker panels.\n```\n\nReference image generated with `image_gen`:\n\n![Multimodal GNN reference](outputs/multimodal-gnn/demo-multimodal-gnn-reference.png)\n\nEditable draw.io file:\n\n[outputs/multimodal-gnn/demo-multimodal-gnn.drawio](outputs/multimodal-gnn/demo-multimodal-gnn.drawio)\n\nValidation: XML parsed successfully with required root cell `0`, default parent cell `1`, and `199` `mxCell` elements.\n\n### Icon-Assisted CRISPR Screen\n\nExample input:\n\n```text\nAn icon-assisted CRISPR imaging screen links perturbation design, microscopy phenotyping, feature storage, neural network modeling, and orthogonal validation. Guide RNA libraries target candidate regulators, microscopy images are collected after perturbation, phenotypic and molecular features are stored in a unified database, a neural network predicts regulator effects, and top hits are validated with checklist-style orthogonal assays.\n```\n\nReference image generated with `image_gen`:\n\n![Icon CRISPR reference](outputs/icon-crispr/demo-icon-crispr-reference.png)\n\nPreview rebuilt with Flaticon icons:\n\n![Icon CRISPR preview](outputs/icon-crispr/demo-icon-crispr-preview.png)\n\nEditable draw.io file:\n\n[outputs/icon-crispr/demo-icon-crispr.drawio](outputs/icon-crispr/demo-icon-crispr.drawio)\n\nSVG preview:\n\n[outputs/icon-crispr/demo-icon-crispr-preview.svg](outputs/icon-crispr/demo-icon-crispr-preview.svg)\n\nValidation: XML parsed successfully with required root cell `0`, default parent cell `1`, `49` `mxCell` elements, and `5` icon image cells. The SVG preview also parsed successfully and contains `5` icon image elements.\n\nIcon sources:\n\n- [DNA icon](https://www.flaticon.com/free-icon/dna_9236703)\n- [Microscope icon](https://www.flaticon.com/free-icon/microscope_1046273)\n- [Database icon](https://www.flaticon.com/free-icon/database_4248443)\n- [Neural network icon](https://www.flaticon.com/free-icon/neural-network_16894263)\n- [Checklist icon](https://www.flaticon.com/free-icon/checklist_1028911)\n\nAttribution: icons designed by Freepik from Flaticon. Flaticon free assets commonly require attribution; verify the current icon page and license before reuse or redistribution.\n\n## Icon Workflow\n\nIcons are optional. Use them only when they make a scientific figure clearer.\n\n1. Use Codex built-in `Browser` to open [Flaticon](https://www.flaticon.com/).\n2. Search for the exact concept plus a style term such as `line`, `outline`, `filled`, `flat`, or `science`.\n3. Prefer free, non-premium icons from the same author or style family.\n4. Open each icon detail page and record the icon URL, author/designer, license, and attribution requirement.\n5. Prefer SVG/vector assets when available and permitted.\n6. Save downloaded project icons under the current output folder, preferably `icons/`.\n7. If license terms, author, or download source are unclear, use an editable draw.io shape instead.\n\n## draw.io Export\n\nThe skill always creates a `.drawio` file first.\n\nIf draw.io Desktop CLI is installed, Codex can try to export:\n\n```bash\ndrawio -x -f pdf -e -b 10 -o figure.drawio.pdf figure.drawio\ndrawio -x -f svg -e -b 10 -o figure.drawio.svg figure.drawio\ndrawio -x -f png -e -b 10 -o figure.drawio.png figure.drawio\n```\n\nCommon CLI locations:\n\n- macOS: `/Applications/draw.io.app/Contents/MacOS/draw.io`\n- Windows: `C:\\Program Files\\draw.io\\draw.io.exe`\n- Linux: `drawio` on `PATH`\n\nIf the CLI is not available, open the `.drawio` file in [app.diagrams.net](https://app.diagrams.net/) or draw.io Desktop and export manually.\n\n## Validation\n\nValidate the skill metadata:\n\n```bash\npython <path-to-skill-creator>/scripts/quick_validate.py ./codex-paper-figure-skill\n```\n\nRecommended diagram checks before publishing generated figures:\n\n- XML parses successfully.\n- Root cells `0` and `1` exist.\n- Labels are editable draw.io text.\n- Arrows and panel order match the manuscript logic.\n- Icon sources and attribution are recorded when external icons are used.\n- Exported previews are not blank, clipped, or text-overlapping.\n\n## Limitations\n\n- `image_gen` output is a visual reference, not the final editable deliverable.\n- Generated raster text may be inaccurate; final labels should be recreated as draw.io text.\n- Without draw.io Desktop CLI, automatic PDF/SVG/PNG export may be unavailable.\n- External icons can introduce licensing obligations. Always check the source page before publication.\n- The skill does not guarantee journal compliance; users should still check target journal figure size, resolution, color, and attribution requirements.\n\n## License And Attribution\n\nThis repository is released under the [MIT License](LICENSE).\n\nThe MIT license covers the skill files, README, and repository code/documentation authored for this project. Example outputs may include generated images and third-party icon references; those assets may have separate terms. Flaticon icons used in the icon demo are attributed to Freepik from Flaticon. Verify current license terms on each icon page before reuse or redistribution.\n\n## Acknowledgements\n\nThis skill borrows the core draw.io generation pattern from the draw.io `SKILL.md` approach: native mxGraphModel XML, editable `.drawio` files, XML validation, and optional export through draw.io Desktop CLI. The draw.io rules needed for this workflow are embedded in `codex-paper-figure-skill/SKILL.md`, so this repository exposes one self-contained skill.\n\nUseful references:\n\n- [OpenAI Codex](https://openai.com/codex/)\n- [draw.io AI-generated diagram guidance](https://www.drawio.com/doc/faq/ai-drawio-generation)\n- [draw.io Desktop and offline usage](https://www.drawio.com/docs/manual/editor/offline/)\n- [draw.io export formats](https://www.drawio.com/docs/manual/export/export-diagram/)\n"}