← Hub — Diagrams & Visualizations
v10.0
Visual Architecture
Brand System v10.0 — Diagrams & Visualizations
Diagrams &
Visualizations
31+ interactive diagrams. Mermaid.js + D3.js + Cytoscape.js + Markmap + Graphviz.
A comprehensive diagram reference covering every Mermaid.js diagram type plus interactive D3.js visualizations, Cytoscape.js network graphs, Markmap mind maps, and Graphviz DOT diagrams — all themed to the GFS brand system. Flowcharts, sequences, ERDs, Gantts, state machines, class diagrams, journeys, pies, mindmaps, timelines, gitgraphs, sankeys, quadrants, architecture, kanbans, block diagrams, force graphs, trees, chord diagrams, network graphs, and dependency trees.
Mermaid.js D3.js Cytoscape.js Markmap Graphviz Dark Mode
31+
Diagrams
18
Mermaid Types
3
D3 Interactives
5
Libraries
Document ID GFS-2026-DGM
Region Global
Status Active
Version 9.0
Date 05 / 18 / 2026
Classification Diagrams & Visualizations
Engines Mermaid.js v11 + D3.js v7
Owner Global Food Solutions, Inc.
02Supply Chain FlowchartsMermaid — flowchart
01
Order-to-Delivery Flow
flowchart LR
flowchart LR
    A["Customer Order"] --> B["Order Entry"]
    B --> C{"Inventory\nCheck"}
    C -->|In Stock| D["Pick"]
    C -->|Backorder| E["Notify Customer"]
    E --> C
    D --> F["Pack"]
    F --> G["Ship"]
    G --> H["Deliver"]
    H --> I["Invoice"]
    I --> J["Payment Received"]
    J --> K["Order Closed"]

    style A fill:#E9F5FF,stroke:#092F64,color:#092F64
    style K fill:#F0FDF4,stroke:#0F766E,color:#0F766E
flowchart LR A["Customer Order"] --> B["Order Entry"] B --> C{"Inventory\nCheck"} C -->|In Stock| D["Pick"] C -->|Backorder| E["Notify Customer"] E --> C D --> F["Pack"] F --> G["Ship"] G --> H["Deliver"] H --> I["Invoice"] I --> J["Payment Received"] J --> K["Order Closed"]
02
Procurement Flow
flowchart TD
flowchart TD
    A["Need Identified"] --> B["Create RFQ"]
    B --> C["Vendor Selection"]
    C --> D["Issue PO"]
    D --> E["Vendor Confirms"]
    E --> F["Goods Received"]
    F --> G{"QC Inspection"}
    G -->|Pass| H["Accept into Stock"]
    G -->|Fail| I["Reject / Return"]
    I --> J["File Vendor Claim"]
    H --> K["3-Way Match"]
    K --> L{"Match?"}
    L -->|Yes| M["Schedule Payment"]
    L -->|No| N["Resolve Discrepancy"]
    N --> K
    M --> O["Payment Sent"]

    style A fill:#E9F5FF,stroke:#092F64,color:#092F64
    style O fill:#F0FDF4,stroke:#0F766E,color:#0F766E
    style I fill:#FEF2F2,stroke:#DC2626,color:#DC2626
flowchart TD A["Need Identified"] --> B["Create RFQ"] B --> C["Vendor Selection"] C --> D["Issue PO"] D --> E["Vendor Confirms"] E --> F["Goods Received"] F --> G{"QC Inspection"} G -->|Pass| H["Accept into Stock"] G -->|Fail| I["Reject / Return"] I --> J["File Vendor Claim"] H --> K["3-Way Match"] K --> L{"Match?"} L -->|Yes| M["Schedule Payment"] L -->|No| N["Resolve Discrepancy"] N --> K M --> O["Payment Sent"]
03
Cold Chain Flow
flowchart LR
flowchart LR
    A["Harvest / Production"] --> B["Pre-Cool\n34-38F"]
    B --> C["Reefer Transport\n34F Target"]
    C --> D["DC Receiving\nTemp Check"]
    D --> E{"Temp OK?"}
    E -->|Yes| F["Cold Storage\n34F"]
    E -->|No| G["Quarantine\nNotify QA"]
    F --> H["Pick Order"]
    H --> I["Reefer Load\n34F Verified"]
    I --> J["Customer Delivery"]
    G --> K["Disposition Decision"]

    style D fill:#FFFBEB,stroke:#B45309,color:#B45309
    style G fill:#FEF2F2,stroke:#DC2626,color:#DC2626
    style J fill:#F0FDF4,stroke:#0F766E,color:#0F766E
flowchart LR A["Harvest / Production"] --> B["Pre-Cool\n34-38F"] B --> C["Reefer Transport\n34F Target"] C --> D["DC Receiving\nTemp Check"] D --> E{"Temp OK?"} E -->|Yes| F["Cold Storage\n34F"] E -->|No| G["Quarantine\nNotify QA"] F --> H["Pick Order"] H --> I["Reefer Load\n34F Verified"] I --> J["Customer Delivery"] G --> K["Disposition Decision"]
■ Three core supply chain processes covering order fulfillment, procurement, and cold chain integrity.
03Sequence DiagramsMermaid — sequence
04
Customer Order API Sequence
sequenceDiagram
sequenceDiagram
    participant C as Customer
    participant P as Portal
    participant N as NetSuite
    participant W as Warehouse
    participant S as Shipping
    participant D as Delivery

    C->>P: Submit order via portal
    P->>N: Create sales order
    N-->>P: SO# confirmed
    P-->>C: Order confirmation email
    N->>W: Release to fulfillment
    W->>W: Pick & pack items
    W->>S: Hand off to carrier
    S-->>N: Tracking number
    N-->>C: Shipment notification
    S->>D: In transit
    D->>C: Delivered
    D-->>N: POD uploaded
    N->>C: Invoice generated (Net 30)
sequenceDiagram participant C as Customer participant P as Portal participant N as NetSuite participant W as Warehouse participant S as Shipping participant D as Delivery C->>P: Submit order via portal P->>N: Create sales order N-->>P: SO# confirmed P-->>C: Order confirmation email N->>W: Release to fulfillment W->>W: Pick & pack items W->>S: Hand off to carrier S-->>N: Tracking number N-->>C: Shipment notification S->>D: In transit D->>C: Delivered D-->>N: POD uploaded N->>C: Invoice generated (Net 30)
05
Vendor Payment Sequence
sequenceDiagram
sequenceDiagram
    participant AP as Accounts Payable
    participant NS as NetSuite
    participant BK as Bank
    participant VN as Vendor

    AP->>NS: Approve vendor bill
    NS->>NS: 3-way match (PO + Receipt + Bill)
    NS-->>AP: Match confirmed
    AP->>NS: Schedule payment batch
    NS->>BK: Initiate ACH transfer
    BK-->>NS: Payment reference #
    BK->>VN: Funds deposited
    VN-->>AP: Payment received confirmation
    AP->>NS: Mark bill as paid
    NS-->>AP: GL entries posted
sequenceDiagram participant AP as Accounts Payable participant NS as NetSuite participant BK as Bank participant VN as Vendor AP->>NS: Approve vendor bill NS->>NS: 3-way match (PO + Receipt + Bill) NS-->>AP: Match confirmed AP->>NS: Schedule payment batch NS->>BK: Initiate ACH transfer BK-->>NS: Payment reference # BK->>VN: Funds deposited VN-->>AP: Payment received confirmation AP->>NS: Mark bill as paid NS-->>AP: GL entries posted
■ Interaction sequences showing message flow between system participants.
04Entity Relationship DiagramMermaid — erDiagram
06
GFS Data Model
erDiagram
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_LINE : contains
    ORDER_LINE }o--|| ITEM : references
    ITEM }o--|| VENDOR : "supplied by"
    VENDOR ||--o{ PURCHASE_ORDER : receives
    PURCHASE_ORDER ||--|{ PO_LINE : contains
    PO_LINE }o--|| ITEM : orders
    ORDER ||--|| SHIPMENT : "fulfilled by"
    SHIPMENT }o--|| WAREHOUSE : "ships from"
    ORDER ||--|| INVOICE : generates
    INVOICE }o--|| CUSTOMER : "billed to"

    CUSTOMER {
        int id PK
        string name
        string segment
        string region
        string credit_terms
        float credit_limit
    }
    ORDER {
        int id PK
        int customer_id FK
        date order_date
        string status
        float total
    }
    ORDER_LINE {
        int id PK
        int order_id FK
        int item_id FK
        int quantity
        float unit_price
        float line_total
    }
    ITEM {
        int id PK
        string sku
        string name
        string category
        int vendor_id FK
        float weight_lbs
        string storage_temp
    }
    VENDOR {
        int id PK
        string name
        string qualification_status
        date last_audit
        float score
    }
    PURCHASE_ORDER {
        int id PK
        int vendor_id FK
        date po_date
        string status
        float total
    }
    PO_LINE {
        int id PK
        int po_id FK
        int item_id FK
        int quantity
        float unit_cost
    }
    WAREHOUSE {
        int id PK
        string name
        string address
        string type
        int capacity_pallets
    }
    SHIPMENT {
        int id PK
        int order_id FK
        int warehouse_id FK
        date ship_date
        string carrier
        string tracking
    }
    INVOICE {
        int id PK
        int order_id FK
        int customer_id FK
        date invoice_date
        date due_date
        float amount
        string status
    }
erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ ORDER_LINE : contains ORDER_LINE }o--|| ITEM : references ITEM }o--|| VENDOR : "supplied by" VENDOR ||--o{ PURCHASE_ORDER : receives PURCHASE_ORDER ||--|{ PO_LINE : contains PO_LINE }o--|| ITEM : orders ORDER ||--|| SHIPMENT : "fulfilled by" SHIPMENT }o--|| WAREHOUSE : "ships from" ORDER ||--|| INVOICE : generates INVOICE }o--|| CUSTOMER : "billed to"
■ Core GFS data model showing relationships between customers, orders, items, vendors, and logistics entities.
05Gantt ChartsMermaid — gantt
07
New Customer Onboarding Timeline
gantt
gantt
    title New Customer Onboarding — 4-Week Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Week 1 — Application
    Receive application           :a1, 2026-06-01, 1d
    Credit check                  :a2, after a1, 2d
    Document review               :a3, after a1, 2d
    Credit approval               :a4, after a2, 1d

    section Week 2 — Setup
    NetSuite account creation     :b1, after a4, 1d
    Pricing tier assignment       :b2, after b1, 1d
    Lane configuration            :b3, after b1, 2d
    Welcome packet sent           :b4, after b2, 1d

    section Week 3 — Training
    Portal access provisioned     :c1, after b3, 1d
    Ordering walkthrough call     :c2, after c1, 1d
    Test order placed             :c3, after c2, 1d
    Test order delivered          :c4, after c3, 2d

    section Week 4 — Go Live
    First live order              :d1, after c4, 1d
    Delivery confirmed            :d2, after d1, 2d
    Invoice sent (Net 30)         :d3, after d2, 1d
    30-day check-in scheduled     :milestone, d4, after d3, 0d
gantt title New Customer Onboarding — 4-Week Timeline dateFormat YYYY-MM-DD axisFormat %b %d ...
08
USDA Bid Process Timeline
gantt
gantt
    title USDA Commodity Bid Process — 12-Week Timeline
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Phase 1 — Solicitation
    Review USDA solicitation       :a1, 2026-07-01, 5d
    Identify copacker / source     :a2, after a1, 5d
    Secure QBL qualification       :a3, after a1, 10d

    section Phase 2 — Bid Preparation
    Spec sheet development         :b1, after a2, 5d
    Cost modeling                  :b2, after a2, 7d
    Internal bid review            :b3, after b2, 3d
    Bid submission                 :crit, b4, after b3, 1d

    section Phase 3 — Award
    USDA evaluation period         :c1, after b4, 14d
    Award notification             :milestone, c2, after c1, 0d
    Contract execution             :c3, after c2, 5d

    section Phase 4 — Fulfillment
    Production scheduling          :d1, after c3, 7d
    First shipment                 :crit, d2, after d1, 3d
    Ongoing deliveries             :d3, after d2, 14d
gantt title USDA Commodity Bid Process — 12-Week Timeline dateFormat YYYY-MM-DD axisFormat %b %d ...
■ Project timelines for onboarding and USDA bid processes with milestones and critical paths.
06State DiagramsMermaid — stateDiagram-v2
09
Order Lifecycle States
stateDiagram-v2
stateDiagram-v2
    [*] --> Draft
    Draft --> PendingApproval : Submit
    PendingApproval --> Approved : Manager approves
    PendingApproval --> Draft : Rejected
    Approved --> InProgress : Release to warehouse
    InProgress --> Shipped : Carrier pickup
    Shipped --> Delivered : POD confirmed
    Delivered --> Closed : Invoice paid
    Closed --> [*]

    InProgress --> OnHold : Issue detected
    OnHold --> InProgress : Issue resolved
    Shipped --> ReturnInitiated : Customer return
    ReturnInitiated --> Closed : Return processed
stateDiagram-v2 [*] --> Draft Draft --> PendingApproval : Submit PendingApproval --> Approved : Manager approves PendingApproval --> Draft : Rejected Approved --> InProgress : Release to warehouse InProgress --> Shipped : Carrier pickup Shipped --> Delivered : POD confirmed Delivered --> Closed : Invoice paid Closed --> [*] InProgress --> OnHold : Issue detected OnHold --> InProgress : Issue resolved Shipped --> ReturnInitiated : Customer return ReturnInitiated --> Closed : Return processed
10
Quality Hold States
stateDiagram-v2
stateDiagram-v2
    [*] --> Received
    Received --> QCCheck : Sample pulled

    state QCCheck {
        [*] --> TempVerification
        TempVerification --> MicroTesting
        MicroTesting --> ChemAnalysis
        ChemAnalysis --> [*]
    }

    QCCheck --> Pass : All within spec
    QCCheck --> Fail : Out of spec

    Pass --> Released : QA sign-off
    Released --> [*]

    Fail --> Quarantine : Isolated
    Quarantine --> Reclassified : Partial use approved
    Quarantine --> Rejected : Destroyed or returned
    Reclassified --> Released
    Rejected --> [*]
stateDiagram-v2 [*] --> Received Received --> QCCheck : Sample pulled state QCCheck { [*] --> TempVerification TempVerification --> MicroTesting MicroTesting --> ChemAnalysis ChemAnalysis --> [*] } QCCheck --> Pass : All within spec QCCheck --> Fail : Out of spec ...
■ State machines modeling order lifecycle and quality control workflows with nested states.
07Class DiagramMermaid — classDiagram
11
NetSuite Record Hierarchy
classDiagram
classDiagram
    class Transaction {
        +int id
        +date tranDate
        +string status
        +float total
        +string memo
        +approve()
        +void_()
    }
    class SalesOrder {
        +int customerId
        +string shipMethod
        +date shipDate
        +fulfill()
        +invoice()
    }
    class PurchaseOrder {
        +int vendorId
        +string department
        +receive()
        +bill()
    }
    class Invoice {
        +int customerId
        +date dueDate
        +float amountDue
        +applyPayment()
    }
    class VendorBill {
        +int vendorId
        +date dueDate
        +float amountDue
        +pay()
    }

    class Entity {
        +int id
        +string name
        +string email
        +string phone
        +string address
    }
    class Customer {
        +string segment
        +string terms
        +float creditLimit
        +float balance
    }
    class Vendor {
        +string qualStatus
        +date lastAudit
        +float rating
    }
    class Employee {
        +string department
        +string title
        +date hireDate
    }

    class Item {
        +int id
        +string sku
        +string name
        +string category
        +float weight
    }
    class InventoryItem {
        +int qtyOnHand
        +int reorderPoint
        +string location
    }
    class NonInventoryItem {
        +string expenseAccount
    }
    class ServiceItem {
        +float ratePerHour
        +string billingType
    }

    Transaction <|-- SalesOrder
    Transaction <|-- PurchaseOrder
    Transaction <|-- Invoice
    Transaction <|-- VendorBill
    Entity <|-- Customer
    Entity <|-- Vendor
    Entity <|-- Employee
    Item <|-- InventoryItem
    Item <|-- NonInventoryItem
    Item <|-- ServiceItem

    SalesOrder --> Customer : customerId
    PurchaseOrder --> Vendor : vendorId
    SalesOrder --> InventoryItem : lineItems
classDiagram class Transaction { ... } class SalesOrder { ... } class PurchaseOrder { ... } Transaction <|-- SalesOrder Transaction <|-- PurchaseOrder ...
■ Object-oriented model of the NetSuite record type hierarchy showing Transaction, Entity, and Item inheritance.
08User Journey MapsMermaid — journey
12
New Customer First Order Experience
journey
journey
    title New Customer First Order
    section Discovery
      Find GFS website: 3: Customer
      Request quote: 4: Customer
      Receive pricing: 5: Customer, Sales
    section Onboarding
      Submit application: 3: Customer
      Credit approved: 5: Finance
      Account setup: 4: Operations
      Portal access: 5: Customer
    section First Order
      Browse catalog: 4: Customer
      Place order: 5: Customer
      Order confirmed: 5: Customer, Sales
    section Fulfillment
      Order picked: 4: Warehouse
      Shipped: 4: Logistics
      Delivered on time: 5: Customer
    section Post-Delivery
      Invoice received: 3: Customer
      Payment made: 4: Customer, Finance
      Follow-up call: 5: Sales, Customer
journey title New Customer First Order section Discovery Find GFS website: 3: Customer ...
13
Driver Delivery Route Day
journey
journey
    title Driver Delivery Route Day
    section Pre-Trip
      Clock in at 4:00 AM: 3: Driver
      Vehicle inspection: 3: Driver
      Load reefer trailer: 4: Driver, Warehouse
      Verify temp 34F: 5: Driver
    section Route — Morning
      Stop 1 Restaurant depot: 5: Driver
      Stop 2 Hospital cafeteria: 4: Driver
      Stop 3 School district: 4: Driver
    section Midday
      Lunch break: 5: Driver
      Check reefer temp: 4: Driver
      Call dispatch for update: 3: Driver
    section Route — Afternoon
      Stop 4 Grocery chain DC: 5: Driver
      Stop 5 Catering company: 4: Driver
      Stop 6 Last stop: 3: Driver
    section Return
      Return to DC: 4: Driver
      Upload PODs: 3: Driver
      Clock out: 5: Driver
journey title Driver Delivery Route Day section Pre-Trip Clock in at 4:00 AM: 3: Driver ...
■ User journey maps tracking satisfaction scores across touchpoints for customers and drivers.
09Pie ChartsMermaid — pie
14
Revenue by Product Category
pie
pie title Revenue by Product Category
    "Cheese" : 45
    "Butter" : 20
    "Frozen" : 15
    "Produce" : 12
    "Dry Goods" : 8
15
Orders by Region
pie
pie title Orders by Region
    "Northeast" : 35
    "Southeast" : 25
    "Midwest" : 20
    "West" : 12
    "South" : 8
16
Customer Segments
pie
pie title Customer Segments
    "Foodservice" : 40
    "Retail" : 30
    "Manufacturing" : 20
    "Government" : 10
■ Distribution breakdowns for revenue, regional orders, and customer segments.
10MindmapsMermaid — mindmap
17
GFS Service Offerings
mindmap
mindmap
  root((GFS Services))
    Procurement
      Commodity Sourcing
      USDA Programs
      Vendor Management
      Contract Negotiation
    Logistics
      Reefer Fleet
      Route Optimization
      Cross-Docking
      Last-Mile Delivery
    Cold Chain
      Temperature Monitoring
      HACCP Compliance
      Cold Storage
      Chain of Custody
    Intelligence
      Market Pricing
      Demand Forecasting
      Analytics Dashboards
      CME Tracking
    Support
      Account Management
      24/7 Order Desk
      Claims Resolution
      Quality Assurance
mindmap root((GFS Services)) Procurement Commodity Sourcing ...
18
Food Safety Program
mindmap
mindmap
  root((Food Safety))
    HACCP
      Hazard Analysis
      Critical Control Points
      Monitoring Procedures
      Corrective Actions
    FSMA
      Preventive Controls
      Supply Chain Program
      Foreign Supplier Verification
      Intentional Adulteration
    Allergens
      Labeling Compliance
      Cross-Contact Prevention
      Staff Training
      Supplier Declarations
    Testing
      Microbiological
      Chemical Analysis
      Environmental Monitoring
      Certificate of Analysis
    Training
      New Hire Orientation
      Annual Refresher
      GMP Certification
      Allergen Awareness
    Audits
      Internal Audits
      Third-Party SQF
      Regulatory FDA
      Customer Audits
mindmap root((Food Safety)) HACCP Hazard Analysis ...
■ Hierarchical mindmaps showing service portfolio and food safety program structure.
11TimelineMermaid — timeline
19
GFS Company History
timeline
timeline
    title Global Food Solutions — Company History
    2018 : Founded in Edgewood, NY
         : First commodity cheese contract
    2019 : First warehouse operational
         : 25 active customers
    2020 : Hermitage PA expansion
         : Cold chain fleet launched
    2021 : 100 customer milestone
         : HACCP program certified
    2022 : NetSuite ERP go-live
         : Automated order processing
    2023 : USDA certified supplier
         : SQF Level 2 achieved
    2024 : 500 active customers
         : National carrier partnerships
    2025 : National coverage achieved
         : Claude AI integration
    2026 : Design System v10.0
         : Cloudflare platform launch
timeline title Global Food Solutions — Company History 2018 : Founded in Edgewood, NY : First commodity cheese contract ...
■ Company milestones from founding in 2018 through the current design system release.
12GitgraphMermaid — gitgraph
20
GFS Design System Version History
gitgraph
gitgraph
    commit id: "v7.0 — Foundation"
    commit id: "v7.1 — Colors"
    branch feature/dark-mode
    commit id: "Dark mode tokens"
    commit id: "Theme toggle"
    checkout main
    merge feature/dark-mode id: "v7.2 — Dark Mode"
    commit id: "v8.0 — Components"
    branch feature/icons
    commit id: "616 SVG icons"
    commit id: "Icon search"
    checkout main
    branch feature/charts
    commit id: "ECharts integration"
    commit id: "D3 visualizations"
    checkout main
    merge feature/icons id: "v8.1 — Icons"
    merge feature/charts id: "v8.2 — Charts"
    commit id: "v10.0 — Complete System"
    branch feature/diagrams
    commit id: "Mermaid diagrams"
    commit id: "D3 interactives"
    checkout main
    merge feature/diagrams id: "v10.0 — Diagrams"
gitgraph commit id: "v7.0 — Foundation" commit id: "v7.1 — Colors" branch feature/dark-mode ...
■ Git branching history of the GFS Design System from v7 through v10.0.
13Sankey DiagramMermaid — sankey-beta
21
Product Flow: Vendors to Customers
sankey-beta
sankey-beta

Bongards,Edgewood DC,450
Dairy Farmers of America,Edgewood DC,320
Land O Lakes,Edgewood DC,280
Cabot Creamery,Edgewood DC,180
Grassland Dairy,Hermitage DC,350
Tillamook,Hermitage DC,220
Crystal Farms,Hermitage DC,160
Edgewood DC,Foodservice Customers,520
Edgewood DC,Retail Chain DCs,410
Edgewood DC,Manufacturing Plants,300
Hermitage DC,Foodservice Customers,280
Hermitage DC,Retail Chain DCs,250
Hermitage DC,Government Programs,200
sankey-beta Bongards,Edgewood DC,450 Dairy Farmers of America,Edgewood DC,320 Land O Lakes,Edgewood DC,280 ...
■ Sankey flow showing volume (in thousands of lbs) from vendor sources through GFS distribution centers to customer segments.
14Quadrant ChartMermaid — quadrant-beta
22
Vendor Evaluation Matrix
quadrant-beta
quadrant-beta
    title Vendor Evaluation Matrix
    x-axis Low Reliability --> High Reliability
    y-axis Low Price Competitiveness --> High Price Competitiveness
    quadrant-1 Strategic Partners
    quadrant-2 Cost Leaders
    quadrant-3 Phase Out
    quadrant-4 Develop

    Bongards: [0.88, 0.72]
    DFA: [0.82, 0.68]
    Land O Lakes: [0.90, 0.55]
    Cabot: [0.75, 0.80]
    Grassland: [0.70, 0.85]
    Tillamook: [0.85, 0.50]
    Crystal Farms: [0.60, 0.75]
    Schreiber: [0.78, 0.65]
    Saputo: [0.65, 0.60]
    Leprino: [0.92, 0.45]
quadrant-beta title Vendor Evaluation Matrix x-axis Low Reliability --> High Reliability y-axis Low Price Competitiveness --> High Price Competitiveness ...
■ Vendor positioning based on reliability and price competitiveness. Quadrant 1 (top-right) represents strategic partners.
15Architecture DiagramMermaid — architecture-beta
23
GFS Technology Stack
architecture-beta
architecture-beta
    group erp(cloud)[ERP Layer]
    group edge(cloud)[Edge Layer]
    group comms(cloud)[Communications]
    group storage(cloud)[Storage]
    group ai(cloud)[AI Layer]

    service netsuite(server)[NetSuite] in erp
    service restlet(server)[RESTlet API] in erp

    service pages(server)[CF Pages] in edge
    service workers(server)[CF Workers] in edge
    service d1(database)[CF D1] in edge

    service zohomail(server)[Zoho Mail] in comms
    service zohocrm(server)[Zoho CRM] in comms

    service dropbox(disk)[Dropbox] in storage

    service claude(server)[Claude AI] in ai

    netsuite:R -- L:restlet
    restlet:R -- L:workers
    workers:B -- T:d1
    workers:R -- L:pages
    claude:T -- B:workers
    zohocrm:R -- L:netsuite
    dropbox:T -- B:workers
architecture-beta group erp(cloud)[ERP Layer] group edge(cloud)[Edge Layer] ... service netsuite(server)[NetSuite] in erp ...
■ System architecture showing the GFS technology stack: NetSuite ERP, Cloudflare edge platform, Zoho communications, Dropbox storage, and Claude AI.
16Kanban BoardMermaid — kanban
24
Order Processing Kanban
kanban
kanban
    New
        SO-4521["Metro Deli — 500lb Cheddar"]
        SO-4522["Harbor Cafe — Mixed Dairy"]
        SO-4523["State School Dist — USDA Butter"]
    Processing
        SO-4518["Fresh Mart — Mozzarella Block"]
        SO-4519["City Hospital — Weekly Standing"]
    Picking
        SO-4515["East Coast Diner — Cheese Blend"]
        SO-4516["Summit Catering — Event Order"]
    Packing
        SO-4512["National Grocery — Retail Pack"]
    Shipped
        SO-4508["Regional Foods — LTL Reefer"]
        SO-4509["Campus Dining — Parcel"]
        SO-4510["Quick Bites — Local Route"]
    Delivered
        SO-4501["Seaside Grill — POD Confirmed"]
        SO-4502["Valley Market — Signed"]
kanban New SO-4521["Metro Deli — 500lb Cheddar"] ...
■ Kanban board showing real-time order processing pipeline from new orders through delivery.
17Block DiagramMermaid — block-beta
25
Warehouse Layout
block-beta
block-beta
    columns 6
    block:receiving:2
        columns 1
        rd["Receiving Dock"]
        ri["Inbound Staging"]
    end
    block:qc:1
        columns 1
        qci["QC Lab"]
        qcs["Sample Hold"]
    end
    block:storage:2
        columns 1
        cs["Cold Storage 34F"]
        ds["Dry Storage 65F"]
        fz["Freezer -10F"]
    end
    block:office:1
        columns 1
        of["Office"]
        sv["Server Room"]
    end
    space:6
    block:pick:2
        columns 1
        pa["Pick Area A"]
        pb["Pick Area B"]
    end
    block:pack:2
        columns 1
        ps["Pack Station 1"]
        ps2["Pack Station 2"]
        lb["Labeling"]
    end
    block:shipping:2
        columns 1
        os["Outbound Staging"]
        sd["Shipping Dock"]
    end
block-beta columns 6 block:receiving:2 columns 1 rd["Receiving Dock"] ri["Inbound Staging"] end ...
■ Warehouse layout showing the flow from receiving docks through QC, storage zones, pick areas, and shipping docks.
18D3 Force-Directed GraphD3.js — Interactive Network
26
GFS Supply Chain Network
D3.js Force
GFS Facilities
Vendors
Customers
Drag nodes to rearrange. Scroll to zoom.
■ Interactive force-directed graph. Drag nodes, scroll to zoom, hover for details. Node size indicates volume.
19D3 Hierarchical TreeD3.js — Collapsible Org Chart
27
GFS Organization Chart
D3.js Tree
Click nodes to expand or collapse branches.
■ Collapsible organizational tree. Click any node to expand or collapse its children.
20D3 Chord DiagramD3.js — Inter-Regional Flow
28
Inter-Regional Product Flow
D3.js Chord
Northeast
Southeast
Midwest
West
South
Mid-Atlantic
■ Chord diagram showing volume of product flowing between six GFS distribution regions. Hover for specifics.
21GFS Technology StackArchify — Architecture Diagram
A1
GFS Technology Stack
architecture
GFS TECHNOLOGY STACK System components and data flow NetSuite ERP Transactions, Inventory, CRM Cloudflare Pages / Workers / D1 CDN, Edge Compute, SQL Zoho Mail / CRM / Calendar Communications Hub Dropbox File Storage Documents, Pricing, Specs Claude AI Automation Analysis, Code, Workflows Webhooks Customer Sync File Refs Data Feed Generated Pages Attachments Primary data flow Secondary / async ERP (core) Cloud Storage External AI
■ Archify-style architecture diagram showing GFS core systems and data flow between NetSuite, Cloudflare, Zoho, Dropbox, and Claude AI.
22Order-to-Delivery PipelineArchify — Workflow Diagram
A2
Order-to-Delivery Pipeline
workflow
ORDER-TO-DELIVERY PIPELINE Linear workflow from customer order through delivery and payment Customer Order NetSuite SO Sales Order Inventory Check IN STOCK Pick List Warehouse Pack Station BACKORDER Backorder Queue & Notify Recheck Shipping Label Carrier Pickup Delivery Confirmed Invoice NetSuite AR Payment Received ORDER PROCESS DECISION FULFILL SHIP Process step Decision Complete Exception
■ Archify-style workflow diagram showing the full order-to-delivery pipeline with inventory decision gate and backorder exception path.
23Cold Chain Data FlowArchify — Data Flow Diagram
A3
Cold Chain Data Flow
dataflow
COLD CHAIN DATA FLOW Sensor data through alerts, compliance, and quality holds SOURCES INGEST PROCESS OUTPUT STORE PII BOUNDARY -- Customer Data Temp Sensors BLE / LoRa Humidity Sensors Door Contact Open/Close IoT Gateway MQTT Broker Real-Time Dashboard Alert Engine Threshold Rules stream events Notifications SMS / Email Compliance FSMA Log Quality Hold Customer Data PII Sensor DB Time-series Compliance Archive (7 yr) Alert History Audit Trail Real-time flow Async / batch PII / restricted PII boundary
■ Archify-style data flow diagram for cold chain monitoring: sensor ingestion through alert processing, with PII boundary around customer-linked quality holds.
24NetSuite Integration MapArchify — Architecture Diagram
A4
NetSuite Integration Map
architecture
NETSUITE INTEGRATION MAP Bidirectional connections with data types and sync frequency NetSuite ERP / Financials / CRM RESTlet + SuiteScript EDI Gateway 850/810/856 Orders in Invoices out Real-time Bank APIs ACH / Wire / Check Payments in Disbursements Daily batch CF Workers Webhooks / Cron Scheduled tasks Every 15 min Zoho CRM Contacts / Deals Customer sync Hourly Shipping APIs UPS / FedEx / LTL Tracking in Labels out On fulfillment USDA Portal Compliance Reports out Cert data in Weekly One-way flow Bidirectional sync Freq labels = sync cadence
■ Archify-style architecture diagram mapping all NetSuite integrations with data direction, payload types, and sync frequency.
25Cloudflare InfrastructureArchify — Architecture Diagram
A5
Cloudflare Infrastructure
architecture
CLOUDFLARE INFRASTRUCTURE Request flow from browser through edge to origin services Browser HTTPS User Request DNS DNS resolve CLOUDFLARE EDGE WAF DDoS Protection Rate Limiting Security Layer CDN Cache 300+ PoPs global Static assets pass Pages Static Site Design System Workers API / Cron Jobs Edge Compute D1 Pricing Database SQLite at Edge R2 File Storage static API query read/write Origin NetSuite API RESTlet fetch Cache HIT (fast path) Security Frontend / CDN Backend / Compute Database / Storage External / Origin Edge boundary
■ Archify-style architecture diagram showing Cloudflare infrastructure: DNS resolution through edge security, CDN caching, to Pages, Workers, D1, and R2 services.
26Cytoscape.js Network GraphsInteractive network visualizations with drag, zoom, and hover
26a GFS Vendor Network Cytoscape.js
26b Product Dependency Graph Cytoscape.js
■ Cytoscape.js network graphs showing vendor relationships and raw material to finished product flows. Drag nodes, scroll to zoom, hover for tooltips.
27Markmap Mind MapsInteractive mind maps from markdown with expand/collapse
27a GFS Design System Overview Markmap
27b Food Safety Program Markmap
■ Markmap mind maps rendered from markdown. Click nodes to expand/collapse branches. Scroll to zoom, drag to pan. GFS cobalt color theme.
28Graphviz DOT DiagramsClassic directed graphs rendered via viz.js
28a NetSuite Data Flow Graphviz / viz.js
28b GFS Page Dependency Tree Graphviz / viz.js
■ Graphviz DOT diagrams rendered to SVG via viz.js. Shows NetSuite transaction flows and GFS design system page dependency tree.
29Diagram Style GuideReference for creating new diagrams
Color Palette Mapping
Mermaid VariableGFS TokenHexUsage
primaryColor--alice#E9F5FFNode backgrounds
primaryTextColor--cobalt#092F64Node text
primaryBorderColor--tufts#468BE6Node borders
lineColor--tufts#468BE6Arrows, connectors
secondaryColor--ice#F4F9FFAlternate backgrounds
tertiaryColor--fog#F0F2F5Subtle fills
taskBkgColor--tufts#468BE6Gantt task bars
activeTaskBkgColor--cobalt#092F64Gantt active tasks
Semantic: success--success#0F766EPass, delivered, positive
Semantic: warning--warning#B45309CCP, pending, caution
Semantic: error--error#DC2626Reject, fail, alert
Font Specifications
ElementFontSizeWeight
Mermaid node textInter, sans-serif13px400
Diagram card titleIBM Plex Mono13px700
Diagram type badgeIBM Plex Mono10px400
Code blocksIBM Plex Mono11px400
D3 tooltipIBM Plex Mono11px400
Do / Don't
Do
  • Use GFS brand theme variables for all Mermaid diagrams
  • Wrap each diagram in a .diagram-card container
  • Include a type badge showing the Mermaid diagram type
  • Add semantic colors for status nodes (success, warning, error)
  • Use Inter for diagram text, IBM Plex Mono for labels/code
  • Provide a "View Source" toggle for educational use
  • Size D3 containers with explicit heights
  • Include legends for multi-color D3 visualizations
Don't
  • Use Mermaid default theme (always set theme: 'base')
  • Use warm or earthy color palettes
  • Add drop shadows to diagram containers
  • Use border-radius above 8px on any element
  • Hardcode hex values instead of CSS variables
  • Mix diagram libraries arbitrarily (pick Mermaid or D3)
  • Skip dark mode considerations
  • Use paid fonts in SVG text elements
When to Use Each Diagram Type
Process with decision points?
Use flowchart (LR for horizontal, TD for vertical)
System-to-system message exchange?
Use sequenceDiagram
Database or data model?
Use erDiagram
Project schedule with dates?
Use gantt
Lifecycle with transitions?
Use stateDiagram-v2
Object hierarchy or inheritance?
Use classDiagram
User experience touchpoints?
Use journey
Proportional breakdown?
Use pie
Hierarchical brainstorm?
Use mindmap
Chronological events?
Use timeline
Version control branching?
Use gitgraph
Flow with volume weights?
Use sankey-beta
Two-axis comparison matrix?
Use quadrant-beta
System architecture?
Use architecture-beta
Task board / pipeline?
Use kanban
Spatial layout / structure?
Use block-beta
Interactive network graph?
Use D3.js force layout
Org chart with expand/collapse?
Use D3.js tree layout
Cross-flow between categories?
Use D3.js chord diagram
■ Reference guide for building new diagrams within the GFS brand system.
← Back to Hub · GFS Design System v10.0 · Global Food Solutions, Inc. · Edgewood, NY