MermaidJS STUDY of TODAY!COMMENT LOGIC FLOW

📊 DIAGRAM of COMMENT LOGIC FLOW

✨ render='false' vs 'true' | private/shared + GitHub analogy

📌 menggambarkan alur keputusan render secara visual.

📊 HORIZONTAL

flowchart TD
    A[<b:comment> tag] --> B{Attribute render?}
    
    B -- "render='false' (default)" --> C[🔒 Private / Internal]
    B -- "render='true'" --> D[🌐 Shared / External]
    
    C --> E[Stored only in Blogger editor]
    C --> F[❌ Not in page source]
    C --> G[❌ Not visible to anyone outside]
    C --> H[✏️ Use: sensitive warnings, admin notes]
    
    D --> I[Exported as normal HTML comment]
    D --> J[✅ Visible in page source]
    D --> K[✅ Visible to collaborators, crawlers]
    D --> L[✏️ Use: debugging markers, team hints]
    
    I --> M[<!-- comment shows here -->]
    
    subgraph GITHUB_ANALOGY [GitHub / peer‑peer analogy]
        N[Private draft = render='false'] 
        O[Committed comment = render='true']
    end
    
    C -.-> N
    D -.-> O
    
    style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px
    style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px
    style C fill:#ffd9d9,stroke:#aa3e3e
    style D fill:#d0e5ff,stroke:#175a8f
    style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray: 4 4
                

✦ Horizontal flow: render='false' (cabang atas) · render='true' (cabang bawah)
⟷ Lebar discroll horizontal · tinggi penuh tanpa scroll vertikal

---

📊 VERTICAL

graph LR A["<b:comment> tag"] --> B{"Attribute render?"} B -- "render='false'" --> C["🔒 Private / Internal"] B -- "render='true'" --> D["🌐 Shared / External"] subgraph FALSE_DETAILS[render='false' details] direction TB C --> E["Stored only in Blogger editor"] C --> F["❌ Not in page source"] C --> G["❌ Not visible to anyone outside"] C --> H["✏️ Use: sensitive warnings, admin notes"] end subgraph TRUE_DETAILS[render='true' details] direction TB D --> I["Exported as normal HTML comment"] D --> J["✅ Visible in page source"] D --> K["✅ Visible to collaborators, crawlers"] D --> L["✏️ Use: debugging markers, team hints"] end I --> M["<!-- comment shows here -->"] subgraph GITHUB_ANALOGY[GitHub / peer-peer analogy] direction TB N["Private draft = render='false'"] O["Committed comment = render='true'"] end C -.-> N D -.-> O style A fill:#d5e8f2,stroke:#1f4b77,stroke-width:2px style B fill:#ffe5b4,stroke:#b45f1b,stroke-width:2px style C fill:#ffd9d9,stroke:#aa3e3e,stroke-width:2px style D fill:#d0e5ff,stroke:#175a8f,stroke-width:2px style FALSE_DETAILS fill:#ffe1e1,stroke:#b34747,stroke-dasharray: 3 2 style TRUE_DETAILS fill:#ddecff,stroke:#256ba0,stroke-dasharray: 3 2 style GITHUB_ANALOGY fill:#f5f0db,stroke:#9e8b5a,stroke-dasharray: 4 4

✦ Left-to-right orientation: main di kolom paling kiri · detail di kanan · mermaid v10
⟷ lebar discroll horizontal · aliran kiri ke kanan (main → false/true → detail lebih kanan)