Building an Enterprise Org Chart - Tutorial

What You'll Build

Organization charts are essential for visualizing company structure, reporting relationships, and team hierarchies. In this tutorial, you'll create a multi-level org chart with:

CEO at the top with an executive card
C-level executives (CTO, CFO, CMO)
Department-level managers
Clear vertical connection lines showing reporting structure
Color-coded departments for visual clarity

Enterprise Org Chart Preview — The final organization chart you'll create

The Org Chart Pattern

Org charts follow a simple pattern:

Position	Shape	Styling
CEO/Executive	Larger rectangle	Gold/amber accent, bold border
C-Level	Standard rectangle	Blue/purple tones
Directors	Standard rectangle	Department color
Connections	Vertical lines	Gray, dashed or solid

Layout Tip: Top-Down Hierarchy

Position the CEO at the top center. Each level below should be evenly spaced and horizontally centered under their supervisor.

Step 1: Create the CEO Card

Start with the CEO at the top of the chart. Use a larger card with a distinctive color.

Add the Executive Card

{
  "id": "ceo-card",
  "type": "rectangle",
  "x": 500,
  "y": 50,
  "w": 200,
  "h": 100,
  "borderRadius": 12,
  "options": {
    "stroke": "amber.500",
    "strokeWidth": 3,
    "fill": "amber.50",
    "fillStyle": "solid"
  }
},
{
  "id": "ceo-emoji",
  "type": "text",
  "x": 500,
  "y": 65,
  "w": 200,
  "h": 30,
  "text": "👔",
  "fontSize": 28,
  "align": "center"
},
{
  "id": "ceo-name",
  "type": "text",
  "x": 500,
  "y": 100,
  "w": 200,
  "h": 20,
  "text": "Sarah Chen",
  "fontSize": 16,
  "fontWeight": "bold",
  "align": "center",
  "options": { "stroke": "#1e293b" }
},
{
  "id": "ceo-title",
  "type": "text",
  "x": 500,
  "y": 120,
  "w": 200,
  "h": 18,
  "text": "Chief Executive Officer",
  "fontSize": 12,
  "align": "center",
  "options": { "stroke": "amber.600" }
}

Step 2: Add Vertical Connection Lines

Connect the CEO to the C-level executives below using vertical lines.

Create the Connecting Lines

// Vertical line from CEO down
{
  "id": "line-ceo-down",
  "type": "line",
  "x": 600,      // Center of CEO card
  "y": 150,      // Bottom of CEO card
  "w": 0,        // No horizontal movement
  "h": 50,       // Goes down 50px
  "options": {
    "stroke": "slate.400",
    "strokeWidth": 2
  }
}

// Horizontal line connecting all C-levels
{
  "id": "line-c-level",
  "type": "line",
  "x": 250,
  "y": 200,
  "w": 700,
  "h": 0,
  "options": { "stroke": "slate.400" }
}

Line vs Arrow: Use type: "line" for org charts - arrows imply direction of flow, while lines show relationships.

Step 3: Add C-Level Executives

Create cards for CTO, CFO, and CMO, evenly spaced below the CEO.

Create Executive Cards

// CTO Card (left)
{
  "id": "cto-card",
  "type": "rectangle",
  "x": 150,
  "y": 220,
  "w": 180,
  "h": 80,
  "borderRadius": 10,
  "options": {
    "stroke": "blue.500",
    "fill": "blue.50",
    "fillStyle": "solid"
  }
}
// Add name and title text elements similarly...

// CFO Card (center)
{
  "id": "cfo-card",
  "type": "rectangle",
  "x": 510,
  "y": 220,
  "w": 180,
  "h": 80,
  "borderRadius": 10,
  "options": {
    "stroke": "green.500",
    "fill": "green.50",
    "fillStyle": "solid"
  }
}

// CMO Card (right)
{
  "id": "cmo-card",
  "type": "rectangle",
  "x": 870,
  "y": 220,
  "w": 180,
  "h": 80,
  "borderRadius": 10,
  "options": {
    "stroke": "purple.500",
    "fill": "purple.50",
    "fillStyle": "solid"
  }
}

Key Design Principles

Consistent card sizes — Same-level roles should have same-sized cards
Vertical alignment — Center subordinates under their manager
Color by department — Engineering=blue, Finance=green, Marketing=purple
Spacing — Equal horizontal gaps between same-level cards
Hierarchy emphasis — CEO card can be slightly larger or have a thicker border

🏢 Build Your Org Chart

Open Privacy Sketch and create your team's organization chart. Start from the top and work down.

Open Privacy Sketch

Next Steps

Product Mindmap Tutorial — Build radial diagrams
Timeline Tutorial — Create historical timelines
LLM Reference — Technical JSON documentation