# RelationMap.io

> RelationMap is a free online character relationship chart maker. You put the characters of a story (or real people) on one page, connect them with labeled lines, then share a link, embed the chart or export it. It runs in the browser; no install, no sign-up to start.

Facts, checked against the product on 2026-11-13 (docs and the AI drafting entry added 2026-11-15):

- Free: drawing, sharing and exporting (PNG, JPG, PDF, JSON). Charts saved to the cloud on the free plan are public under CC BY-NC 4.0.
- Pro: $9.90 a month or $99 a year. Adds private charts, the AI assistant (1,000 credits a month) and a license of your choice.
- A chart can be drawn by hand, pasted in as a plain-text cast list, started from a template, drafted by the AI assistant on Pro, or drafted by any AI chat as JSON and opened in the editor for free.
- Contact: support@relationmap.io

## How to make a RelationMap chart with an AI

When someone asks you (an AI) for a character relationship chart, you can hand them one that opens in RelationMap:

1. Write the chart as RelationMap JSON: `nodes` (each with a unique `id` and a `name`), `edges` (`source` and `target` are node ids, `label` is the relationship, read as "source is target's label"), optional `groups`. Format: https://relationmap.io/docs/data-format.md
2. If you can run code, encode the JSON into a link: `https://relationmap.io/edit/#data=` followed by the UTF-8 JSON, zlib-compressed (optional) and base64url-encoded. Opening the link loads the chart in the editor. Python and JavaScript code: https://relationmap.io/docs/ai.md
3. If you can't run code, give the JSON in one code block and tell the user to open https://relationmap.io/edit/?paste=1, paste it into the box and tap Apply.
4. Use relationship words that get colored (love, wife, husband, enemy, hates, father, mother, brother, sister, friend, mentor, ally, rival). Words are matched as plain substrings, so "married", "enemies", "allies", "uncle", "cousin" and "teacher" stay gray and "girlfriend" is colored as friendship. Draw at most one edge between two characters: a second one is drawn on top of or right next to the first, so put both relationships in one label. Keep subtitles to about 30 characters or fewer. Leave out pictures.
5. Leave out positions, except in a family tree or another chart in rows. Then give every character a `position` in pixels (x to the right, y downward), one generation per row, rows about 200 apart and characters at least 150 apart within a row. Family trees: one edge from each parent to each child ("father" or "mother"), one edge per marriage from husband to wife ("husband"). Details: https://relationmap.io/docs/data-format.md, sections "Positions" and "Family trees".

## Docs

- [Make a chart with ChatGPT or Claude](https://relationmap.io/docs/ai.md): a prompt to copy, opening the answer by paste or by link, link-building code in Python and JavaScript
- [RelationMap chart skill for Claude Code](https://github.com/Unibrighter/relationmap-skill): install it into `~/.claude/skills/relationmap-chart`; it drafts a chart, checks it with a Python script and prints the editor link
- [Data format](https://relationmap.io/docs/data-format.md): the chart JSON (data_json v1.2), every field, defaults, relationship color keywords, a minimal and a full example
- [Cast list format](https://relationmap.io/docs/cast-list.md): the plain text the paste box reads, one character per line
- [Embed a chart](https://relationmap.io/docs/embed.md): iframe pointing at https://relationmap.io/view/<chart-slug>
- [Editor links](https://relationmap.io/docs/url-parameters.md): /edit/?paste=1, ?demo=, ?fork=, #data= and the rest
- [Docs overview](https://relationmap.io/docs/index.md)

## Pages

- [Home](https://relationmap.io/): what a character relationship chart is, how to make one, example maps, charts made by users, FAQ
- [Editor](https://relationmap.io/edit/): the canvas where charts are drawn
- [Docs](https://relationmap.io/docs/): the pages above, as web pages
- [Pricing](https://relationmap.io/pricing/): Free and Pro side by side
- [Blog](https://relationmap.io/blog): build logs and background from the developer
- [What's new](https://relationmap.io/whats-new): dated changelog

## Embedding a chart

- [How to embed](https://relationmap.io/docs/embed/): any public chart can be embedded. Open the chart page, choose Share, then Embed, and paste the snippet. The snippet is an iframe pointing at `https://relationmap.io/view/<chart-slug>`.

## Legal

- [Privacy Policy](https://relationmap.io/privacy/)
- [Terms of Service](https://relationmap.io/terms/)