Examples & Use Cases
Explore the versatility of Diagrammatic-UI through these examples. Each example demonstrates a different use case and highlights specific features of the library.
Organization Charts
Visualize company structures and hierarchies with customizable org charts.
Process Flows
Create workflow diagrams and decision trees with connected processes.
Customer Journey Maps
Map out customer experiences with detailed journey visualizations.
Network Topology
Represent network infrastructure and connections between components.
Organization Charts
Organization charts are perfect for visualizing company structures, team hierarchies, and reporting relationships.
Organization Chart Example
const orgChartData = {
nodes: [
{
id: 'ceo',
name: 'Jane Smith',
type: 'primary',
description: 'Chief Executive Officer',
sections: [
{
id: 'responsibilities',
name: 'Responsibilities',
items: [
{ id: 'resp1', value: 'Company Strategy' },
{ id: 'resp2', value: 'Investor Relations' },
{ id: 'resp3', value: 'Executive Leadership' }
]
},
{
id: 'contact',
name: 'Contact',
items: [
{ id: 'cont1', value: 'jane@example.com' },
{ id: 'cont2', value: '+1 (555) 123-4567' }
]
}
]
},
{
id: 'cto',
name: 'Bob Johnson',
type: 'secondary',
description: 'Chief Technology Officer'
},
{
id: 'cfo',
name: 'Alice Williams',
type: 'secondary',
description: 'Chief Financial Officer'
},
{
id: 'vpe',
name: 'Tom Davis',
type: 'tertiary',
description: 'VP of Engineering'
},
{
id: 'vps',
name: 'Sarah Brown',
type: 'tertiary',
description: 'VP of Sales'
},
],
edges: [
{ id: 'e1', source: 'ceo', target: 'cto' },
{ id: 'e2', source: 'ceo', target: 'cfo' },
{ id: 'e3', source: 'cto', target: 'vpe' },
{ id: 'e4', source: 'cfo', target: 'vps' },
],
name: 'Company Org Chart',
category: 'organization'
};
<Graph
data={orgChartData}
theme="light"
autoLayout="tree"
/>Process Flows
Process flows help visualize workflows, decision trees, and sequential operations. They're ideal for documenting business processes, software flows, and decision-making paths.
Process Flow Example
const processFlowData = {
nodes: [
{ id: 'start', name: 'Start', type: 'input' },
{ id: 'processA', name: 'Process A', type: 'process', description: 'First step in our workflow' },
{ id: 'decision', name: 'Decision Point', type: 'process' },
{ id: 'processB', name: 'Process B', type: 'process' },
{ id: 'processC', name: 'Process C', type: 'process' },
{ id: 'end', name: 'End', type: 'output' },
],
edges: [
{ id: 'e1', source: 'start', target: 'processA', label: 'Begin' },
{ id: 'e2', source: 'processA', target: 'decision', label: 'Evaluate' },
{ id: 'e3', source: 'decision', target: 'processB', label: 'If True' },
{ id: 'e4', source: 'decision', target: 'processC', label: 'If False' },
{ id: 'e5', source: 'processB', target: 'end' },
{ id: 'e6', source: 'processC', target: 'end' },
],
name: 'Workflow Process',
category: 'process'
};
<Graph
data={processFlowData}
autoLayout="tree"
direction="horizontal"
nodeStyleConfig={{
typeStyles: {
input: { fill: '#d8f3dc', stroke: '#2d6a4f' },
output: { fill: '#ffccd5', stroke: '#9d0208' },
process: { fill: '#f1faee', stroke: '#1d3557' }
}
}}
/>Customer Journey Maps
Customer journey maps help visualize the entire customer experience, from awareness to advocacy. They're useful for marketing teams, UX designers, and customer experience professionals.
Customer Journey Map Example
const customerJourneyData = {
nodes: [
{
id: 'awareness',
name: 'Awareness',
type: 'data',
description: 'Customer becomes aware of the product/service',
sections: [
{
id: 'channels',
name: 'Channels',
items: [
{ id: 'ch1', value: 'Social Media' },
{ id: 'ch2', value: 'Search Engines' },
{ id: 'ch3', value: 'Word of Mouth' }
]
},
{
id: 'metrics',
name: 'Metrics',
items: [
{ id: 'm1', value: 'New Visitors' },
{ id: 'm2', value: 'Ad Impressions' },
{ id: 'm3', value: 'Brand Recognition' }
]
}
]
},
{
id: 'consideration',
name: 'Consideration',
type: 'data',
description: 'Customer evaluates options'
},
{
id: 'purchase',
name: 'Purchase',
type: 'data',
description: 'Transaction occurs'
},
{
id: 'retention',
name: 'Retention',
type: 'data',
description: 'Ongoing relationship'
},
{
id: 'advocacy',
name: 'Advocacy',
type: 'data',
description: 'Customer promotes the brand'
}
],
edges: [
{ id: 'e1', source: 'awareness', target: 'consideration', label: 'Research' },
{ id: 'e2', source: 'consideration', target: 'purchase', label: 'Decision' },
{ id: 'e3', source: 'purchase', target: 'retention', label: 'Experience' },
{ id: 'e4', source: 'retention', target: 'advocacy', label: 'Satisfaction' },
{ id: 'e5', source: 'advocacy', target: 'awareness', type: 'dashed', label: 'Referral' }
],
name: 'Customer Journey Map',
category: 'journey'
};
<Graph
data={customerJourneyData}
autoLayout="circular"
nodeStyleConfig={{
type: 'document',
typeStyles: {
data: { header: '#e0f2fe', border: '#0ea5e9' }
}
}}
/>Network Topology
Network topology diagrams help visualize the arrangement of elements in a computer network or other communications system. They're useful for IT professionals, network engineers, and system architects.
Network Topology Example
const const networkData = {
nodes: [
{ id: 'router', name: 'Main Router', type: 'root' },
{ id: 'switch1', name: 'Switch 1', type: 'branch' },
{ id: 'server1', name: 'Web Server', type: 'leaf' }
],
edges: [
{ id: 'e1', source: 'router', target: 'switch1' },
{ id: 'e2', source: 'switch1', target: 'server1' }
]
};
<Graph
data={networkData}
autoLayout="tree"
nodeStyleConfig={{
typeStyles: {
root: { fill: '#fef3c7', stroke: '#d97706' },
branch: { fill: '#e0f2fe', stroke: '#0ea5e9' },
leaf: { fill: '#dcfce7', stroke: '#16a34a' },
client: { fill: '#f3e8ff', stroke: '#9333ea' }
}
}}
/>Document-Style Nodes Example
Document-style nodes are particularly useful for displaying structured information like code, methods, properties, and other technical details.
Document Nodes Example
const documentData = {
nodes: [
{
id: 'doc1',
name: 'RowingBoat',
type: 'interface',
path: 'RowingBoat.java',
description: 'Java interface for rowing boats',
sections: [
{
id: 'methods',
name: 'Methods',
items: [
{ id: 'method1', value: 'public abstract void row(int speed, Direction direction)' }
]
},
{
id: 'imports',
name: 'Imports',
items: [
{ id: 'import1', value: 'java.lang' }
]
}
]
}
};
<Graph
data={documentData}
nodeStyleConfig={{
type: 'document',
typeStyles: {
interface: {
header: '#e0e7ff',
border: '#6366f1'
},
class: {
header: '#dcfce7',
border: '#22c55e'
}
}
}}
/>Try It Yourself
Ready to experiment with these examples? Head over to our interactive playground to try them out and create your own visualizations.
Open Playground