Markdown notes + references

A note's content is Markdown — headings, lists, bold, links all render. The standout is [[Name]]: it becomes a live node reference. Click one to select that node, hover to highlight it. References resolve by node id or label, so they stay meaningful as your graph grows.

Hover the coloured references in the note to highlight their nodes; click one to select it.

Notes

// `content` is Markdown. `[[Name]]` becomes a live node reference — click to select
// the node, hover to highlight it. It matches a node by id or label.
const notes = [
    {
        id: 'release-notes',
        color: '#C4B5FD',
        x: 60,
        y: -180,
        width: 270,
        height: 250,
        content: `# Release 2.0

**Owner:** [[API]]

- [[Frontend]] redesign
- Finish the [[Docs]]
- Cut the [[Release]]

See the [changelog](https://example.com).`
    }
]

Data

const data = {
    nodes: [
        { id: 'planning', data: { label: 'Planning' } },
        { id: 'design', data: { label: 'Design' } },
        { id: 'api', data: { label: 'API' } },
        { id: 'frontend', data: { label: 'Frontend' } },
        { id: 'docs', data: { label: 'Docs' } },
        { id: 'release', data: { label: 'Release' } }
    ],
    edges: [
        { from: 'planning', to: 'design' },
        { from: 'design', to: 'api' },
        { from: 'design', to: 'frontend' },
        { from: 'api', to: 'docs' },
        { from: 'frontend', to: 'docs' },
        { from: 'docs', to: 'release' }
    ],
    notes // markdown annotations with [[node]] references (see the Notes tab)
}