Refactor
atilladeniz/Kubeli
Refactors code following Ousterhout's design principles. An agent skill from atilladeniz/Kubeli.
Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior.
Install Diagram Editor
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AHS12/thoth-blueprint diagram-editor --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/diagram-editor .claude/skills/diagram-editor && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .claude/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editorType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AHS12/thoth-blueprint diagram-editor --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/diagram-editor .agents/skills/diagram-editor && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .agents/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AHS12/thoth-blueprint diagram-editor --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/diagram-editor .cursor/skills/diagram-editor && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .cursor/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AHS12/thoth-blueprint.git --path .agents/skills/diagram-editor--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AHS12/thoth-blueprint diagram-editor --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/diagram-editor .gemini/skills/diagram-editor && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .gemini/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AHS12/thoth-blueprint diagram-editorInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/diagram-editor .github/skills/diagram-editor && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .github/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AHS12/thoth-blueprint --skill diagram-editor -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AHS12/thoth-blueprint diagram-editor --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AHS12/thoth-blueprint.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/diagram-editor .opencode/skills/diagram-editor && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "diagram-editor" agent skill from https://github.com/AHS12/thoth-blueprint/tree/main/.agents/skills/diagram-editor into .opencode/skills/diagram-editor/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "diagram-editor", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
diagram-editor- GitHub stars
- 625
- Token cost
- ~506 tokens
- SKILL.md length
- 229 words
- Files
- 1
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- GPL-3.0
At a glance
Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior.
- Works in 7 steps: Use store actions such as addNode,… → Keep table IDs and column IDs stable.… → Treat nodes, notes, zones, and edges as… → …
- Changing editor components
- SKILL.md covers Read First, Change Rules and Verification
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Diagram Editor is an agent skill from AHS12/thoth-blueprint. Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior. Use when changing editor components or diagram mutations.
Its SKILL.md is about 510 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development. It works with React and Zustand. The repository describes itself as: Design databases the way you think. Create unlimited schemas, import existing designs, visualize relationships, export to multiple formats, and generate framework migrations… The licence is GPL-3.0.
When your agent uses it
- Changing editor components
- Diagram mutations
Example prompts
- “/diagram-editor”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Use store actions such as addNode, updateNode, deleteNodes, addEdge, updateEdge, deleteEdge, onNodesChange, and onEdgesChange instead of…
- Keep table IDs and column IDs stable. Handles usually encode a column ID plus a side suffix such as ${columnId}-right-source or…
- Treat nodes, notes, zones, and edges as distinct data types. A table soft-delete is not equivalent to removing a note or zone.
- Preserve sourceColumns, targetColumns, isComposite, constraint metadata, and custom edge positions when updating relationships.
- Check diagram lock, zone lock, and position-lock behavior on every new mutation entry point, not only the visible toolbar action.
- When using React Flow's setNodes or setEdges, verify the resulting change is forwarded to Zustand and survives the debounced IndexedDB save.
- Preserve selection, clipboard, viewport, keyboard shortcut, and responsive canvas behavior.
What it can do on your machine
Read from SKILL.md and the folder at commit 075e0e3. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Diagram Editor loads about 506 tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 229 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from AHS12/thoth-blueprint at commit 075e0e3, republished under its GPL-3.0 licence (© AHS12). 229 words, ~506 tokens.
Download SKILL.mdSave it as
.claude/skills/diagram-editor/SKILL.md (or your agent's skills folder).- name
- diagram-editor
- description
- Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior. Use when changing editor components or diagram mutations.
Diagram Editor
Read First
src/lib/types.tsfor node, edge, column, and relationship data shapes.src/store/store.tsfor the mutation API and persistence-facing state transitions.src/components/DiagramEditor.tsxfor React Flow wiring and interaction patterns.src/lib/utils.tsfor ID, handle, position, lock, and relationship helpers.
Change Rules
- Use store actions such as
addNode,updateNode,deleteNodes,addEdge,updateEdge,deleteEdge,onNodesChange, andonEdgesChangeinstead of mutating diagram arrays in a component. - Keep table IDs and column IDs stable. Handles usually encode a column ID plus a side suffix such as
${columnId}-right-sourceor${columnId}-left-target; never parse these with a naivesplit("-")because IDs contain hyphens. - Treat nodes, notes, zones, and edges as distinct data types. A table soft-delete is not equivalent to removing a note or zone.
- Preserve
sourceColumns,targetColumns,isComposite, constraint metadata, and custom edge positions when updating relationships. - Check diagram lock, zone lock, and position-lock behavior on every new mutation entry point, not only the visible toolbar action.
- When using React Flow's
setNodesorsetEdges, verify the resulting change is forwarded to Zustand and survives the debounced IndexedDB save. - Preserve selection, clipboard, viewport, keyboard shortcut, and responsive canvas behavior.
Verification
- Type-check and lint after edits.
- Exercise create, edit, move, delete, restore, copy/paste, lock/unlock, relationship editing, and viewport persistence when relevant.
- For edge or handle changes, test simple and composite foreign keys and refresh the page before declaring persistence correct.
© AHS12, GPL-3.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/diagram-editor of AHS12/thoth-blueprint.
Open the folder on GitHubat commit 075e0e3
Compare with similar skills
Diagram Editor next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Diagram Editor this skillAHS12/thoth-blueprint | 625 | — | ~506 | Automated safety check: Pass | GPL-3.0 | |
| Refactoratilladeniz/Kubeli | 387 | — | ~7.7k | Automated safety check: Warn | MIT | |
| React Flow Node TSmicrosoft/skills | 3.1k | 6 repos | ~502 | Automated safety check: Pass | MIT | |
| Component Patternsrevfactory/harness-100 | 1.3k | — | ~1.5k | Automated safety check: Pass | Apache-2.0 | |
| Reactflow Expertcuriositech/some_claude_skills | 243 | — | ~2.1k | Automated safety check: Notes | MIT | |
| Cdphuoshen80/ReinaManager | 694 | — | ~178 | Automated safety check: Pass | AGPL-3.0 |
Similar skills
- Official
React Flow Node TS
microsoft/skills
Create React Flow node components with TypeScript types, handles, and Zustand integration.
Component Patterns
revfactory/harness-100
React/Next.js component design pattern library. An agent skill from revfactory/harness-100.
Reactflow Expert
curiositech/some_claude_skills
Builds DAG visualizations using ReactFlow v12 with custom nodes, ELKjs auto-layout, Zustand state management, and live state updates via WebSocket.
Cdp
huoshen80/ReinaManager
通过 CDP 连接 ReinaManager WebView2，复现、诊断并验证真实应用的前端问题。仅在用户显式调用 /cdp 或 $cdp 进行前端调试时使用。
React Native Mmkv
margelo/react-native-skills
Fast synchronous key-value storage for React Native via react-native-mmkv (Nitro-backed).
More from AHS12/thoth-blueprint
AI Assistant
AHS12/thoth-blueprint
Safely change the schema AI assistant, cloud or local providers, credentials, context construction, streamed patches, retries, validation, or atomic diagram application.
Import Export
AHS12/thoth-blueprint
Change SQL, SQLite worker, DBML, JSON, Mermaid, SVG, or database export/import flows while preserving diagram semantics and round trips.
Persistence
AHS12/thoth-blueprint
Safely change browser-local persistence, Dexie schemas, store synchronization, backups, trash, restore, or checkpoints.
Pwa Release
AHS12/thoth-blueprint
Safely change Vite, service-worker, offline fallback, cache, Docker, Vercel, or release-distribution behavior.
Migration Codegen
AHS12/thoth-blueprint
Change Laravel, TypeORM, or Django migration generation and generated SQL parsing.
Related
Categories
Questions about Diagram Editor
What does Diagram Editor do?
Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior. Diagram Editor is an agent skill from AHS12/thoth-blueprint. Safely change the React Flow database diagram editor, including table, note, zone, relationship, selection, locking, layout, keyboard, and viewport behavior.
When should I use Diagram Editor?
Diagram Editor fits situations like: changing editor components; diagram mutations.
How do I install Diagram Editor in Claude Code?
Run `npx skills add AHS12/thoth-blueprint --skill diagram-editor -a claude-code`. Or copy the skill folder (.agents/skills/diagram-editor in AHS12/thoth-blueprint) into .claude/skills/diagram-editor in your project. Claude Code loads it when a task matches its description.
How do I install Diagram Editor in Codex?
Run `npx skills add AHS12/thoth-blueprint --skill diagram-editor -a codex`. Or copy the skill folder (.agents/skills/diagram-editor in AHS12/thoth-blueprint) into .agents/skills/diagram-editor in your project. Codex loads it when a task matches its description.
Can I use Diagram Editor in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AHS12/thoth-blueprint --skill diagram-editor -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/diagram-editor, .gemini/skills/diagram-editor, .github/skills/diagram-editor and .opencode/skills/diagram-editor in your project.
What does Diagram Editor need to run?
SKILL.md names no scripts, command-line tools or credentials: Diagram Editor is instructions for the agent only.
Does Diagram Editor access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Diagram Editor safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Diagram Editor use?
Diagram Editor is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Diagram Editor use?
About 506 tokens (SKILL.md is roughly 2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Diagram Editor?
Skills that share tags, products or a category with Diagram Editor: Refactor (atilladeniz/Kubeli, 387 stars), React Flow Node TS (microsoft/skills, 3.1k stars), Component Patterns (revfactory/harness-100, 1.3k stars) and Reactflow Expert (curiositech/some_claude_skills, 243 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Diagram Editor?
AHS12 (a GitHub user) maintains it in AHS12/thoth-blueprint, which has 625 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on August 12, 2026.
Source: AHS12/thoth-blueprint on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.