📊 Supply Chain Visualizer

🗺️ Understanding Your Canvas

Before building complex maps, let's understand how the canvas is organized.

The Grid Layout

Your canvas is divided into:

• Horizontal lanes (also called swimlanes) - Each represents a geographic region
• Vertical columns - Each represents a tier in your supply chain flow

Think of it like a spreadsheet: regions are rows, tiers are columns, and nodes are cells showing where facilities exist.

Geographic Regions (Horizontal Lanes)

From top to bottom, the default regions are:

1. North America - Top lane
2. Europe - Upper-middle
3. APAC (Asia-Pacific) - Middle
4. Latin America - Lower-middle
5. Middle East - Bottom

You can customize these! Add, remove, or rename regions in Settings → Regions.

Supply Chain Tiers (Vertical Columns)

From left to right, representing the flow of materials/products:

1. Upstream - Raw material suppliers (Tier 2/n)
2. Suppliers - Your direct suppliers
3. Internal - Your manufacturing/processing facilities
4. Distribution - Warehouses, logistics centers
5. Customers - End customers, retailers

You can customize these too! Rename or reorder in Settings → Tiers.

🏗️ Building Your Supply Chain Map

Creating a Node

Nodes represent locations in your supply chain (suppliers, warehouses, factories, distribution centers, customers).

1. Click the "Add Node" button in the toolbar
2. Fill in the details:
   • Label: Descriptive name (e.g., "Berlin Assembly Plant")
   • Type: Supplier, Warehouse, Factory, or Customer
   • Region: Geographic area (North America, Europe, APAC, etc.)
   • Tier: Position in the supply chain flow (Upstream, Suppliers, Internal, Distribution, Customers)
3. Press Enter to create the node
4. Press Escape to cancel

The node automatically appears in the correct swimlane based on your region/tier selections.

Creating a Connection

Connections (edges) represent logistics flows between locations.

1. Drag from the right edge of one node to the left edge of another node
2. The connection appears with intelligent defaults:
   • Same region: Road transport, 7 days transit time
   • Different regions: Sea transport, 35 days transit time
3. The connection label automatically shows the transport mode and time

Editing a Node or Connection

1. Click any node or connection on the canvas
2. The Inspector panel opens on the right side of the screen showing all properties
3. Modify any field - changes apply instantly
4. Use the Delete button at the bottom of the Inspector to remove the item

Navigating Your Canvas

Pan (move around): Click and drag on empty space

Zoom in/out: Use your mouse scroll wheel

Reset view: Click the fit view button (⊡) in the top-left corner to see everything at once

Find controls:

• Top bar: Add Node, Add Annotation, Auto Layout (✨), Undo/Redo, Settings (⚙️), Import/Export
• Top-left corner: Zoom controls (fit view, zoom in, zoom out)
• Right side: Inspector panel (appears when you select something)

Auto Layout - Smart Positioning

Click the magic wand icon (✨) in the header to automatically arrange your nodes:

• Connected nodes in the same tier are placed side-by-side (source left, target right)
• Unconnected nodes are stacked vertically with proper spacing
• Horizontal alignment across tiers creates a clear flow visualization

This is especially useful when your diagram becomes complex or after importing data.

⚡ Working Efficiently

Keyboard Shortcuts

Action	Windows/Linux	Mac
Delete item	Delete	Delete
Copy nodes	Ctrl+C	Cmd+C
Paste nodes	Ctrl+V	Cmd+V
Undo	Ctrl+Z	Cmd+Z
Redo	Ctrl+Y	Cmd+Y
Cancel	Escape	Escape
Confirm	Enter	Enter

Copy and Paste

1. Select one or more nodes (click while holding Ctrl/Cmd, or box-select by dragging)
2. Copy with Ctrl+C (Cmd+C on Mac)
3. Paste with Ctrl+V (Cmd+V on Mac)
4. Pasted nodes appear slightly offset for easy identification
5. Connections are copied only when both nodes are selected

Use cases: Duplicate similar facilities across regions, clone supply chain patterns

Undo and Redo

• Undo: Click the "↶" button or press Ctrl+Z (Cmd+Z on Mac)
• Redo: Click the "↷" button or press Ctrl+Y (Cmd+Y on Mac)
• The header shows how many undo steps are available

Multi-Selection and Deletion

• Select multiple items by dragging a box around them (box-select)
• Or hold Ctrl/Cmd and click individual items
• Press Delete to remove all selected items at once
• The Inspector shows "Multi-Selection" when multiple items are selected

🎨 Customizing Your Visualization

Changing Connection Styles

1. Click "⚙️ Settings" in the header
2. Go to the "Connectors" tab
3. Choose your preferred line style:
   • Straight: Direct lines, clean and simple
   • Step: 90-degree angles, organized look
   • Smooth: Curved bezier lines, flowing design
4. Click "Done" - all connections update immediately

Advanced Connection Styling

Make individual connections stand out with custom styling:

1. Open Settings → Connectors
2. Turn on "Advanced Styling" under Visual Options
3. Click any connection on the canvas
4. Use the Inspector panel to customize:
   • Arrow Style: Choose from 6 styles (default, large, small, triangle, etc.)
   • Line Style: Solid, dashed, dotted, or dash-dot
   • Color: Pick any color with the color picker
5. Click "Use Default" next to any property to reset it
6. Use "Reset to Defaults" to remove all custom styling at once

Moving Connection Labels

1. Click and drag any connection label to reposition it
2. The label stays where you place it
3. To reset: Select the connection → Inspector panel → "Reset Position" button

Controlling Displayed Information

Choose which properties appear on nodes and connections:

1. Open Settings (⚙️ icon)
2. Select "Nodes" or "Connectors" tab
3. Choose the item type (Supplier, Warehouse, etc.)
4. Switch between two tabs:
   • "Inspector Panel": Properties shown when editing
   • "Node/Connector Display": Properties shown on canvas
5. Check/uncheck properties to control visibility

Example: Show only the label on the canvas but keep all details available in the Inspector.

Adding Custom Properties

1. Settings → Nodes or Connectors
2. Scroll to "Add Custom Property"
3. Enter a name (no spaces, use camelCase like "leadTime")
4. Click "Add"
5. The property now appears in the Inspector for all items of that type

💾 Managing Your Data

Exporting Your Work

Export as JSON (recommended for saving complete work):

• Click the green "Export" button in the header
• Downloads a complete file with all nodes, connections, and settings
• Can be imported later to restore your entire map

Export as Excel/CSV (for spreadsheet analysis):

• Click the "Excel/CSV Export" button
• Opens your supply chain data in a familiar spreadsheet format
• Great for sharing with teams or doing data analysis

Importing Data

From JSON:

• Click the purple "Import" button
• Select your previously exported JSON file
• Everything loads exactly as you saved it

From Excel/CSV:

• Click the "Excel/CSV Import" button
• Select a spreadsheet with your supply chain data
• The system intelligently maps your columns (recognizes various column names)
• Missing information gets sensible defaults
• New regions and tiers are automatically created

💡 Tips for Better Maps

Best Practices

1. Use descriptive labels: "Munich Metalworks" is better than "Supplier 1"
2. Organize by actual geography: Place your nodes in the region where they physically exist
3. Set tiers correctly: This ensures proper left-to-right flow visualization
4. Use auto-layout: When things get messy, the magic wand (✨) will clean it up
5. Save regularly: Export to JSON frequently to preserve your work
6. Add custom properties: Capture important details like capacity, cost, SKU numbers

Common Tasks

🔧 Troubleshooting

I can't see some properties on my nodes

Check Settings → Nodes → [Node Type] → Node Display and ensure the properties you want are checked.

My connections look messy

Try the Auto Layout feature (magic wand icon ✨) to reorganize everything, or switch to Step connector style in Settings for a more organized look.

I accidentally deleted something

Use the Undo button (↶) or press Ctrl+Z (Cmd+Z on Mac) to bring it back.

My canvas is zoomed in too much

Use the controls in the top-left corner to fit everything on screen, or scroll up to zoom out.

📧 Need Help?

For additional support or to report an issue, use the Contact Support link in Settings → About.

---

🤖 AI Assistant — Quick Reference

SC Visualizer includes an AI assistant that can build and modify supply chain maps using plain English. Click the robot icon (🤖) in the bottom-right corner to open the chat panel.

Setting Up AI

1. Open ⚙️ Settings → AI
2. Select your AI provider (OpenAI, Anthropic, Google Gemini, or Manual/Clipboard)
3. Paste your API key and select a model
4. Click Save

Example AI Prompts

• "Build a supply chain for a global car manufacturer with suppliers in Germany and Japan, assembly in Mexico, and customers in North America and Europe."
• "Add a new warehouse in Singapore in the Distribution tier."
• "Mark all single-source suppliers as high risk with a red highlight."
• "Show only node names and transport modes for a management presentation."
• "Geocode all nodes so they appear on the World Map."

🌍 World Map View

See your supply chain on a real geographic map. Click View in the toolbar and choose:

• World Map (Full) — Entire screen geographic view
• Picture-in-Picture — Map overlay in the corner while working on the canvas

For nodes to appear on the map, set their Location property (e.g. "Seoul, South Korea") or ask the AI to geocode them.

📈 Network Analytics

Click the 📈 Analytics panel handle at the bottom of the screen to open the built-in insights dashboard:

• Overview — Total nodes, connections, average transit time, total cost
• Velocity & Critical Path — Longest supply chain path, bottleneck identification
• Financial Matrix — Cost heatmap by connection and region
• Risk Analysis — Single-source dependencies, geographic concentration