Back to Promptbook components gallery
Repository

Mermaid Social Graph

A dynamic social network graph visualization using Mermaid.js, perfect for displaying relationships between people, organizations, and groups.

mermaidgraphsocialnetworkvisualizationdiagram
v0.100.1
Promptbook Team

Live Preview

Features

  • ✓Interactive social network visualization
  • ✓Multiple node types (person, organization, group)
  • ✓Various relationship types with different visual styles
  • ✓Customizable themes and layouts
  • ✓Responsive design
  • ✓Loading states and error handling
  • ✓Built on Mermaid.js for reliability

Usage Examples

Basic Usage

<MermaidSocialGraph nodes={nodes} edges={edges} />

With Custom Theme

<MermaidSocialGraph nodes={nodes} edges={edges} theme="dark" />

Horizontal Layout

<MermaidSocialGraph nodes={nodes} edges={edges} direction="LR" />

Quick Actions

Download Component

Technical Details

Category

Internal

Dependencies

react: ^18.0.0 || ^19.0.0
@promptbook/components: 0.100.1

Props

nodesrequired
Node[]
Array of nodes representing entities in the graph
edgesrequired
Edge[]
Array of edges representing relationships between nodes
className
string
Additional CSS classes
Default: ""
theme
'default' | 'dark' | 'forest' | 'neutral'
Mermaid theme for the graph
Default: "default"
direction
'TB' | 'TD' | 'BT' | 'RL' | 'LR'
Direction of the graph layout
Default: "TB"
Promptbook Components Gallery