Relationship Graph Generator
Turn “source → target” relationships into an automatically laid-out graph using text or form input, with force, circle, grid and tree layouts plus SVG/PNG export.
FreeOnline Tool
Loading…
How to Use
Choose text input or form editing, enter relationships, and generate an exportable relationship graph.
- In text mode, enter one relationship per line. Formats include
A -> B,A → B,A => B,A depends on Bstyle Chinese relation words,A: B,A -> B | labelandA -> B (label). Lines starting with # or // are ignored. - Click Parse and Draw to build the graph, or Load Sample Data to load an example with 5 nodes and 5 relationships.
- In Form Editing, add nodes and choose one of six color types: default, primary, secondary, success, warning or danger. Add relationships by selecting source and target and entering an optional label; both node and relationship lists support deletion.
- Choose a layout (force, circle, grid or tree), adjust node size (20–80), edge color and whether to show text labels.
- Open Advanced Settings to change canvas width (200–2000), height (150–1500) and label color.
- Export with Copy SVG, Download SVG or Download PNG. PNG is rendered at 2× size; if the browser cannot convert SVG to PNG, use SVG instead.
Features
- Two input methods: bulk text parsing or form-based node and edge editing.
- Text parsing supports arrows, Chinese relation words, colon separators, pipe labels and parenthesized labels; duplicate nodes are merged automatically.
- Six node types: default (gray), primary (blue), secondary (dark gray), success (green), warning (orange) and danger (red).
- Four layouts: force-directed, circle, grid and tree. The force layout is deterministic, so the same input always produces the same positions.
- Tree layout starts from nodes without incoming edges and still covers cycles and isolated nodes.
- Adjustable node size, edge color, label color, label visibility, canvas width and canvas height.
- Export SVG or a 2× PNG, or copy the SVG source directly. Parsing, layout and drawing all happen locally in the browser.
Use Cases
Project module dependencies
List relationships such as “module A -> module B” to get a project structure diagram and export it as SVG for design documents.
Service call mapping
Describe microservice calls with “A calls B” and use force or tree layout to inspect the overall structure.
Slides and documentation
Use form editing to adjust node colors and labels, then export PNG or SVG for a presentation diagram.
Concept mapping
Draw contains, relates-to and belongs-to links between concepts to spot missing or redundant connections.
FAQ
Which relationship formats does text input accept?
It accepts A -> B, A → B, A => B, A --> B, Chinese forms such as A 依赖 B, and A: B with either ASCII or full-width colons. Labeled forms A -> B | label and A -> B (label) also work. Blank lines and lines starting with # or // are ignored.
Which Chinese relation words are supported?
The parser recognizes 依赖 (depends on), 调用 (calls), 关联 (relates to), 包含 (contains), 指向 (points to), 属于 (belongs to), 使用 (uses) and 读写 (reads/writes). They must have spaces on both sides, for example “模块B 调用 服务D”; the words are not split when they appear inside a node name.
Is the force-directed layout random each time?
No. The force layout is deterministic and does not use random numbers, so the same nodes, edges and canvas settings produce exactly the same positions.
How does tree layout handle cycles or isolated nodes?
It starts breadth-first from nodes that have no incoming edges. If every node has an incoming edge, the first node is used as the root. Nodes not reached during traversal are appended as a final level, so none are dropped.
What if PNG export fails?
PNG export relies on the browser drawing the SVG into a canvas. If the browser cannot do this, the page suggests using SVG instead; downloading SVG preserves the vector graphic.
Is graph data uploaded?
No. Text parsing, layout computation and SVG/PNG drawing all run locally in the browser; no nodes or relationships are uploaded.