graph-layout

用 React Flow + ELK 渲染可读的代码/依赖/架构图，解决边交叉、标签碰撞、大图不可读。先按事实建图再优化呈现，绝不为美观改动真实关系；支持 overview/focus/path 三种模式、可折叠容器与带 relation ID 的聚合 trunk。Use when the user asks to…

Skill by Michaelliu1017

IndexedLicense unknown

Write a review

Chalk Labs

Need help deploying graph-layout?

Chalk Labs sets up agents like this inside real teams: connected to your tools, tested on your data, with a human in the loop where it matters.

Book a call

Install

Works with Claude Code, Claude apps, Codex, Cursor, Gemini CLI, GitHub Copilot, VS Code, OpenCode, Goose, Windsurf. Read the repository before you give any tool access to your data.

npx agentmarket install skill/michaelliu1017-graph-layout

Asks which of your tools to add it to (Claude Code, Codex, Cursor, VS Code, Windsurf, Gemini CLI, Claude Desktop) and shows the change first. See https://agentmart.dev/cli.

Get the weekly diff

The weekly diff: one email a week with new agent tools, notable updates and grade changes, plus security alerts for tools you follow. Double opt-in, one-click unsubscribe.

About

用 React Flow + ELK 渲染可读的代码/依赖/架构图，解决边交叉、标签碰撞、大图不可读。先按事实建图再优化呈现，绝不为美观改动真实关系；支持 overview/focus/path 三种模式、可折叠容器与带 relation ID 的聚合 trunk。Use when the user asks to visualize dependency or architecture graphs with React Flow/ELK, fix edge crossings, label collisions or hairball graphs, build overview/focus/path modes, collapsible containers, or aggregate cross-container edges.

Use cases: frontend

Reviews

Write a review

No reviews yet. Installed it? Reviews come from verified installers only. How reviews work

Permissions

What this skill can do and what it asks for, from its SKILL.md. Checked Oct 25, 2026.

Tools: No tools found
Secrets: None asked for
Install scripts: None found

Network hosts it talks to 1

codeload.github.com · found in install command

Files it touches

~/.claude/skills/graph-layout

What's inside

Skill name: graph-layout
Description: 用 React Flow + ELK 渲染可读的代码/依赖/架构图，解决边交叉、标签碰撞、大图不可读。先按事实建图再优化呈现，绝不为美观改动真实关系；支持 overview/focus/path 三种模式、可折叠容器与带 relation ID 的聚合 trunk。Use when the user asks to visualize dependency or architecture graphs with React Flow/ELK, fix edge crossings, label collisions or hairball graphs, build overview/focus/path modes, collapsible containers, or aggregate cross-container edges.
License: unknown
Instructions: 151 lines in SKILL.md · view on GitHub

Files (2)

SKILL.md
react-flow-elk-pattern.md · references/

The license isn't open source, so the instructions aren't shown here. Read SKILL.md on GitHub

More from Michaelliu1017/VisionOwl-Codebase-Visualizer-Prototype

Signals

Stars: 0
Forks: 0
Open issues: 0
Last commit (this folder): Sep 10, 2026 (1 month ago)

From GitHub (fetched Oct 24, 2026).

Details

License: License unknown
Repository: github.com/Michaelliu1017/VisionOwl-Codebase-Visualizer-Prototype
First seen: Oct 24, 2026
Last checked: Oct 24, 2026
Source: GitHub github-graphql

More from Michaelliu1017

Done for you

Rather not set it up yourself?

Chalk Labs scopes, builds and runs agents for your team: the task audit, the eval harness, the integrations and the weekly ops report. Fixed scope, priced before we start.

See how we build AI agents →Read the case studies

Chalk Labs is a two-founder AI and growth studio. We build AI agents, CRMs and MVPs for Web3 and AI companies, and have shipped 50+ product and token launches.

launches shipped: 50+; launches shipped
media placements: 500+; media placements
founders on every account: 2; founders on every account

Press we've placed: Forbes · CoinDesk · Decrypt · Cointelegraph · The Block

Rahil Jain, Co-founder, Chalk Labs. Ex-Goldman Sachs engineer. You talk to the person who builds it.

Get graph-layout running in your business

Tell us what you want to automate. A founder replies within one working day with a plan, not a pitch deck.

Need help deploying graph-layout?

Call Get help

Cite this page

graph-layout skill. Agent Mart. https://agentmart.dev/skills/michaelliu1017-graph-layout (last updated 2026-10-24)