Diagram Test Page

Halaman ini untuk testing metode diagram mana yang render dengan baik di BizOps Wiki.

Metode A: Mermaid Diagrams

Mermaid adalah library JavaScript yang render diagram dari text syntax di dalam markdown code blocks.

A1. Mermaid Flowchart

flowchart LR
    A[Lead Masuk] --> B{Qualified?}
    B -->|Ya| C[Discovery]
    B -->|Tidak| D[Nurture / Disqualify]
    C --> E[Solution Design]
    E --> F[Estimation]
    F --> G[Proposal]
    G --> H{Won?}
    H -->|Ya| I[Handoff ke Delivery]
    H -->|Tidak| J[Win/Loss Analysis]

A2. Mermaid Sequence Diagram

sequenceDiagram
    participant C as Client
    participant AE as Account Executive
    participant PC as Presales Consultant
    participant SA as Solution Architect
    
    C->>AE: Request for proposal
    AE->>PC: Assign presales
    PC->>C: Schedule discovery
    PC->>C: Conduct discovery session
    PC->>SA: Request solution design
    SA->>PC: Solution & architecture
    PC->>PC: Write proposal
    PC->>AE: Review & approval
    AE->>C: Submit proposal

A3. Mermaid Gantt Chart

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 0
        Inception & Planning    :a1, 2026-03-01, 14d
    section Phase 1
        Foundation             :a2, after a1, 28d
    section Phase 2
        Core Features          :a3, after a2, 42d
    section Phase 3
        Advanced Features      :a4, after a3, 28d
    section Phase 4
        Testing & UAT          :a5, after a4, 21d
    section Phase 5
        Go-Live & Hypercare    :a6, after a5, 14d

A4. Mermaid Pie Chart

pie title Loss Reason Distribution Q3
    "Price" : 35
    "Experience" : 30
    "Response Time" : 15
    "Technical Fit" : 12
    "Other" : 8

A5. Mermaid Mindmap

mindmap
  root((Presales Playbook))
    Fondasi
      Presales Overview
      Qualification & MEDDIC
      Service Catalog
    Core Process
      Discovery
      Solution Design
      Estimation
      Proposal Writing
    Winning
      Demo & PoC
      RFP Response
      Objection Handling
    Delivery
      Handoff
      KPIs
      Win/Loss
    Resources
      Tools & Templates
      Knowledge Management

Metode B: Inline SVG

SVG langsung di-embed di markdown sebagai HTML. Tidak butuh library tambahan.

B1. SVG Flowchart — Presales Process

B2. SVG Scoring Gauge — FTQ Score

B3. SVG Bar Chart — Win Rate per Quarter

B4. SVG Pie Chart — Loss Reasons

B5. SVG MEDDIC Scoring Radar

Metode C: HTML Tables dengan Emoji/Color

Menggunakan HTML table styling untuk membuat visual yang informatif.

C1. Progress Bar Style

C2. Status Dashboard

C3. Funnel Visualization (ASCII + Emoji)

          📥 LEADS: 100
     ┌─────────────────────────┐
     │   QUALIFIED: 60 (60%)    │
     └─────────────────────────┘
        ┌───────────────────┐
        │ PROPOSAL: 35 (58%) │
        └───────────────────┘
           ┌─────────────┐
           │ WON: 20 (57%)│
           └─────────────┘
              🏆 20% overall
              conversion rate

Metode D: ASCII Art (Pasti Work)

ASCII art menggunakan monospace font dalam code blocks — ini pasti render di semua markdown.

D1. ASCII Flowchart

┌────────┐   ┌─────────┐   ┌──────────┐   ┌──────────┐   ┌──────────┐
│  Lead  │──▶│ Qualify │──▶│Discovery │──▶│ Solution │──▶│Estimation│
└────────┘   └─────────┘   └──────────┘   └──────────┘   └────┬─────┘
                                                                  │
    ┌──────────────────────────────────────────────────────┘
    ▼
┌──────────┐   ┌─────────┐   ┌───────────┐
│ Proposal │──▶│  Demo/  │──▶│ Negotiate │──▶ 🏆 WON!
└──────────┘   │   PoC  │   └───────────┘
                └─────────┘

D2. ASCII Org Chart

                    ┌───────────────────┐
                    │ Steering Committee│
                    └─────────┬─────────┘
                              │
               ┌────────────┴─────────────┐
               │                          │
    ┌──────────┴─────────┐  ┌─────────┴──────────┐
    │    CLIENT SIDE     │  │   DIVISTANT SIDE    │
    ├────────────────────┤  ├────────────────────┤
    │ • Project Owner    │  │ • Project Manager   │
    │ • Business PIC     │  │ • Tech Lead         │
    │ • IT PIC           │  │ • Solution Arch.    │
    │ • UAT Team         │  │ • 2x Sr Developer   │
    └────────────────────┘  │ • 1x Jr Developer   │
                            │ • QA Engineer       │
                            └────────────────────┘

Metode E: Inline HTML dengan Div/Style

Menggunakan HTML blocks langsung di markdown — tergantung apakah wiki sanitize HTML atau tidak.

E1. HTML Styled Process Flow

E2. HTML Styled Metric Cards

E3. HTML Styled Timeline

Ringkasan Test

Tolong cek halaman ini di browser dan beri tahu mana yang render dengan baik!

Dari sini kita tentukan metode terbaik (atau kombinasi) untuk diagram di seluruh playbook.