skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

node-link-and-diagram-layout

Selects and applies automatic layout algorithms for node-link diagrams and connected-node visuals.

5.3k|765|Updated Mar 4, 2026
Search Tags:#erd#elk#GraphViz#graph layout#edge routing#Data Visualization#node-link diagram
One-click install
npx skills add https://github.com/openai/plugins --skill node-link-and-diagram-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: node-link-and-diagram-layout
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-data-visualization/skills/node-link-and-diagram-layout
Command: npx skills add https://github.com/openai/plugins --skill node-link-and-diagram-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Choosing the wrong automatic layout makes network diagrams, ERDs, state machines, and dependency graphs unreadable due to edge crossings, overlapping nodes, and unstable placement. This Skill classifies the graph structure and reading task, then recommends the correct layout family, routing style, and rendering stack.

Core Features & Use Cases

  • Graph Classification and Algorithm Selection: Maps rooted trees, DAGs, undirected networks, ERDs, and port-constrained block diagrams to tidy tree, Sugiyama layered, force/stress, radial, or planarization layouts.
  • Routing, Overlap, and Stability Guidance: Treats edge routing, overlap removal, port constraints, and layout stability as explicit phases with concrete quality criteria.
  • Stack Recommendations: Recommends Graphviz engines, ELK Layered, Dagre, React Flow, or Cytoscape.js based on whether the output is static documentation or an interactive editor.
  • Use Case: A team building a React node editor for database schemas asks how to auto-arrange tables; the Skill recommends port-aware ELK Layered layout with orthogonal routing so foreign-key connectors do not run under table bodies.

Quick Start

Ask the assistant to choose a layout algorithm and routing strategy for your diagram, describing the graph type such as a state machine, ERD, decision tree, or undirected network.

Frequently Asked Questions about node-link-and-diagram-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What layout algorithm should I use for a database schema diagram?▼

Database schema diagrams and ERDs work best with layered Sugiyama-style layout combined with orthogonal edge routing and port-aware constraints. This keeps foreign-key connectors from running under table bodies and preserves meaningful field ordering.

How do I reduce edge crossings in a network diagram?▼

Reducing crossings starts with choosing the right layout family for the graph structure, then applying crossing minimization heuristics such as barycenter ordering within layered layouts. For non-planar graphs where crossings dominate readability, planarization-based pipelines are a strong fallback.

ELK vs Graphviz vs Dagre for automatic graph layout?▼

Graphviz dot suits static layered layouts generated at build time, while ELK Layered fits interactive products needing ports, compounds, labels, and orthogonal routing. Dagre pairs with React Flow when React owns interaction and an external engine handles layout.

When should I avoid force-directed layout?▼

Avoid force-directed layout for ERDs, state machines, decision trees, and business workflows that have a clear direction or strict rank order. Force and stress methods suit undirected networks where cluster shape and neighborhood proximity matter more than global flow.

How do I keep automatic layout stable in an interactive node editor?▼

Use constrained or interactive layered layout modes that preserve node order and port order instead of re-randomizing from scratch after each edit. Pinning or semi-pinning nodes and applying proximity-preserving overlap removal maintains the user's mental map across revisions.

Related Skills

Explore More Software Engineering Skills→
anthrilanthril
3

knowledge-graph-builder

Convert domain concepts into JSON-LD knowledge graph specifications.

Official
Advanced
neo4j-contribneo4j-contrib
101

neo4j-nvl-skill

Render Neo4j query results as interactive browser graphs with NVL.

Official
Intermediate
wildbitcawildbitca
1

common-architecture-diagramming

Standardize architecture diagrams using C4 and UML notation with mandatory legends and metadata.

Official
Intermediate
agilebydesignagilebydesign
1

drawio-story-sync

Synchronize DrawIO story maps with story-graph data via Python API and CLI.

Official
Advanced