# Flowchart Layout Optimizer

> Calculates an optimal, hierarchical, and non-intersecting layout for a flowchart provided as an SVG file using the Sugiyama algorithm (Dagre).

- Skill: `oocx/flowchart-layout-optimizer` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add oocx/flowchart-layout-optimizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oocx/flowchart-layout-optimizer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: oocx (https://skillmd.com/u/oocx)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/oocx/flowchart-layout-optimizer

---

# Flowchart Layout Optimizer

This skill uses the industry-standard **Dagre** library to apply the **Sugiyama Layered Graph Drawing** algorithm to an SVG-rendered flowchart. The goal is to produce a beautiful, easy-to-read diagram where nodes are aligned into logical layers (ranks) and edges follow clean, non-intersecting paths.

## 💡 When to Use

Use this skill when you have an existing SVG that visually represents a flow, process, or directed graph, but the current node positions and arrow paths are messy, overlapping, or manually placed and hard to follow.

## 🛠 Prerequisites

The agent must be in an environment where Node.js and the dependencies listed in `package.json` can be installed and executed.

## 📝 Instructions for the Agent

1. **Install Dependencies:** Run `npm install` in the skill's directory.
2. **Graph Mapping (Critical Pre-step):** The provided SVG uses position-based routing and lacks unique `id` attributes on node groups (`g.node`) and explicit `data-source`/`data-target` attributes on edge paths (`path`).
    * **Agent Action:** The agent **MUST** execute a mapping logic *before* calling the layout script. This is done by instructing the script to use sequential IDs and providing the connection list.
3. **Execute Script:** Call the `run_script` tool with the appropriate selectors and **the required flow map** (passed as a simplified JSON string).

    > **Required Selectors:**
    > * `node_selector`: `g.node`
    > * `edge_selector`: `path[d]` (Selects all paths that define edges)
>
    > **Connection Map Generation (Example for Agent):**
    > The agent will internally generate a flow map by analyzing the text content of the nodes and the flow:
>
    > ```json
    > {
    >   "MAINTAINER": ["REQUIREMENTS ENG", "ISSUE ANALYST", "WORKFLOW ENG"],
    >   "REQUIREMENTS ENG": ["FEATURE SPEC"],
    >   "ISSUE ANALYST": ["ISSUE ANALYSIS"],
    >   // ... and so on for all 14 nodes/artifacts
    > }
    > ```
>
    > *Note: Since the provided SVG has nodes/edges without IDs, the `run.js` script will now handle the sequential ID assignment.*