Skip to main content

Visualization

Export your graph to Mermaid diagrams for visualization.

Quick Start​

import { InMemoryGraphFactory, GraphToMermaid } from 'grafio';

const factory = new InMemoryGraphFactory();
const graph = factory.forGraph('default');
// ... add nodes and edges ...

const mermaid = await GraphToMermaid.fromGraph(graph);
console.log(mermaid.toString());

Output Example​

Options​

interface MermaidOptions {
  showProperties?: boolean;    // default: false
  includeEdgeLabels?: boolean; // default: true
  direction?: 'TD' | 'LR';     // default: 'TD'
}

Show Properties​

const mermaid = await GraphToMermaid.fromGraph(graph, {
  showProperties: true
});
/*
flowchart TD
    abc123["Person | name: Alice | age: 30"]
*/

Flowchart Direction​

// Top-down (default)
const td = await GraphToMermaid.fromGraph(graph, { direction: 'TD' });

// Left-right
const lr = await GraphToMermaid.fromGraph(graph, { direction: 'LR' });

Using with Serialized Data​

// From JSON (synchronous)
const json = await graph.exportJSON();
const mermaid = new GraphToMermaid(JSON.stringify(json));
// or
const mermaid2 = new GraphToMermaid(json);

Rendering Mermaid​

Mermaid Live Editor​

Copy the output and paste into Mermaid Live Editor.

VS Code Extension​

Install the Mermaid Markdown Preview extension.

Next Steps​