Relationship Diagram Generator

Create character relationship diagrams online, supporting relationship visualization for characters in novels, films, and TV shows, with drag-and-drop layout, batch import, and multiple chart styles.

Bug report

Browser execution mode: Your data is processed in your browser and is not uploaded to the server.

Speed and Stability: Processing speed depends on your device and browser. For large batch work, the desktop version may be more stable.

Loading tool, please wait...

If the online tool fails to load or run, try the desktop tool.https://tools.yikeaigc.com/

Tool Usage

Return to old version

Set data and styles first, then generate the relationship chart.

Supports manual entry, bulk paste, JSON/TXT/CSV import, template loading, and local saving. After generation, drag nodes, zoom the canvas, and export PNG, SVG, JSON, Markdown, or ZIP.

Role0

Relationship0

Group0

Add roles and relationships in “Data” first, then adjust layout settings in “Style”.

Organize characters and relationships

Add all characters first, then create relationships. Bulk import detects formats like “Zhang San|Protagonist” and “Zhang San→Li Si|Friend”.

Add role

Role names must be unique. Notes can be added.

Role name

Role type

Color

Notes

Add relationship

Start and end points can be selected from added roles.

Source Role

Target Role

Relationship Description

Relationship Group

Direction

Line Type

Strength

Color

Bulk Import

One per line. Roles and relationships can be pasted separately. Missing roles can be auto-created.

Role Text

Relationship Text

Auto-create missing roles when importing relationships

File Import

Supports JSON, TXT, and CSV. Select multiple files at once; only the first 20 are shown.

Choose Files

Import Mode

No files selected

Role List

Relationship List

Adjust layout and visual settings

Choose a layout based on the number of roles and relationship complexity. Use force-directed for complex networks, and hierarchy or grid for clearly structured data.

Layout Type

Canvas & Nodes

Canvas Height

Node Size

Node Shape

Text Size

Link Distance

Background

Display options

Show character names Show relationship names Show arrows Show grid Node shadow Curved links

Generate and review graph

After generating, drag nodes, drag empty space to move the canvas, and use the mouse wheel to zoom. Right-click a node to edit, recolor, focus, or delete it.

Graph status

Protagonist Main role Related role

No relationship graph yet

Tips

Drag nodes to arrange them; drag empty space to move the canvas; use the wheel to zoom; right-click a node for quick edits.

Export graph and data

Images are best for sharing, SVG for later editing, JSON for reimporting and editing, and Markdown for documents.

PNG image Export the current canvas as a bitmap for direct use in documents.

SVG vector Keep nodes and text, scalable and editable.

JSON data Save full character, relationship, and style settings.

Markdown table Generate character and relationship tables for documentation.

Data summary

Filename prefix

JSON preview

Instructions

Software Usage Instructions

Organize character data: On the “Data” page, enter a character name, select the character type and color, optionally add notes such as identity, faction, or chapter, then click “Add”.
Create character relationships: Select the source character and target character, enter a relationship description, optionally set the relationship group, direction, line style, strength, and color, then click “Add Relationship” to complete the connection.
Batch import data:
- Character import: Enter one character per line in the format “Character Name|Type|Color|Notes”, for example “Lin Jianchuan|Protagonist|#d94841|Reporter”.
- Relationship import: Enter relationships in the format “Character A→Character B|Relationship Description|Group|Direction|Line Style|Color”, for example “Lin Jianchuan→Shen Yan|Old Friend|Friendship|Bidirectional|Solid Line|#0f6fb5”.
- File import: JSON, TXT, and CSV files are supported. You can merge them into the current data or replace the current data.
Set graph style: Go to the “Style” page, choose a force-directed, circular, grid, or hierarchical layout, and adjust canvas height, node size, node shape, text size, link distance, background, and display options.
Generate the relationship graph: Go to the “Generate” page and click “Generate Relationship Graph”. After generation, you can drag nodes to arrange their positions, drag blank areas to move the canvas, use the mouse wheel to zoom, and right-click a node to edit, recolor, focus, or delete it.
Search and filter: Enter a character name on the generation page to highlight nodes. Filter by relationship group to view only a specific type of relationship, such as family, faction, conflict, work, and more.
Save and export: You can save the current settings and draft, or export a PNG image, SVG vector graphic, JSON data, Markdown table, or click “Download All ZIP” to save everything as a package.

FAQ

A: The force-directed layout is suitable for complex character networks; the circular layout is suitable for displaying peer characters; the grid layout is suitable for neat arrangement and comparison; the hierarchical layout is suitable for family relationships, organizational structures, and data with clear character levels.

A: You can check “Automatically create missing characters when importing relationships”, and the tool will automatically add characters that have not appeared in the relationships to the character list. If you want strict control over character names, import characters first, then import relationships.

A: One-way is suitable for relationships such as mentor-apprentice, superior-subordinate, and clue direction; two-way is suitable for mutual relationships such as friends, spouses, collaboration, and rivalry; no arrow is suitable for connections that only express an association without emphasizing direction.

A: You can increase the canvas height, reduce node size, hide relationship text, increase link distance, or use relationship group filtering. When there are many characters, you can first view them by groups such as factions, relatives, or event lines.

A: PNG is an image format, suitable for direct sharing and inserting into documents; SVG is a vector format, suitable for further editing in design or drawing software, and also suitable for relationship diagrams that need to be enlarged for viewing.

A: JSON saves characters, relationships, and style parameters. You can re-import it later to continue editing, and it also makes it easier to back up, migrate, or share the same character relationship data with others for collaborative organization.