==================================================
Click button below to the Compiled Mermaid.js aka Visualization:
Mermaid.js Study Today — Comment Logic Flow
==================================================
<!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Comment Logic Flow Diagram</title> <!-- Mermaid.js Library --> <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script> <style> /* ======================================== GLOBAL STYLES ======================================== */ * { box-sizing: border-box; } body { background: #f2f6fc; margin: 20px; font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; } /* ======================================== HEADER SECTION ======================================== */ .page-header { margin: 40px 0 20px; } .page-header h1 { text-align: center; color: #113355; } .intro-box { background: rgb(228, 240, 250); border-radius: 40px; font-size: 1.1rem; margin-top: 30px; padding: 14px 24px; } .intro-box h2 { background: rgb(236, 245, 253); border-radius: 30px; margin-top: 6px; padding: 8px; text-align: center; color: #113355; } .intro-box .description { font-weight: 700; } /* ======================================== BADGE STYLES ======================================== */ .badge-title { background: #082b40; color: white; padding: 8px 28px; border-radius: 60px; font-size: 1.3rem; font-weight: 600; display: inline-block; margin-bottom: 18px; letter-spacing: -0.2px; } .badge-center { text-align: center; margin-bottom: 10px; } /* ======================================== DIAGRAM CONTAINER ======================================== */ .diagram-mega { background: #fafbfc; border-radius: 24px; padding: 20px; border: 2px solid #a3c0d9; width: 100%; max-width: 1200px; overflow-x: auto; overflow-y: visible; margin: 0 auto 20px; box-shadow: 0 10px 25px rgba(0, 30, 60, 0.15); } .mermaid-inner { min-width: 800px; width: fit-content; background: white; padding: 25px 20px; border-radius: 28px; box-shadow: 0 8px 20px rgba(0, 20, 40, 0.1); margin: 0; } .mermaid-inner svg { max-height: none !important; height: auto !important; display: block; } .mermaid { text-align: center; } /* ======================================== FOOTER NOTE ======================================== */ .foot-note { text-align: center; background: #ecf5fd; padding: 10px 18px; border-radius: 40px; margin: 16px auto; color: #103c5c; font-size: 0.95rem; max-width: 800px; border: 1px solid #b8d2e0; } /* ======================================== DIVIDER ======================================== */ .section-divider { margin: 40px 0; border: none; border-top: 2px solid #a3c0d9; } /* ======================================== NOSCRIPT WARNING ======================================== */ .no-js-warning { background: #ffe0b0; padding: 20px; border-radius: 30px; text-align: center; margin: 20px auto; max-width: 600px; } </style></head>
<body> <!-- ======================================== HEADER SECTION ======================================== --> <header class="page-header"> <h1>📊 DIAGRAM of COMMENT LOGIC FLOW</h1> <div class="intro-box"> <h2>✨ render='false' vs 'true' | private/shared + GitHub analogy</h2> <p> <span class="description">📌</span> menggambarkan alur keputusan <code>render</code> secara visual. </p> </div> </header> <!-- ======================================== HORIZONTAL DIAGRAM (TOP-DOWN FLOWCHART) ======================================== --> <section> <div class="badge-center"> <span class="badge-title">📊 HORIZONTAL</span> </div> <div class="diagram-mega"> <div class="mermaid-inner"> <pre class="mermaid">flowchart TD A[<b><b:comment> tag</b>] --> B{Attribute render?} B -- "render='false' (default)" --> C[🔒 <b>Private / Internal</b>] B -- "render='true'" --> D[🌐 <b>Shared / External</b>] 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[<code><!-- comment shows here --></code>] 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 </pre> </div> </div> <div class="foot-note"> ✦ Horizontal flow: <strong>render='false'</strong> (cabang atas) · <strong>render='true'</strong> (cabang bawah)<br> ⟷ Lebar discroll horizontal · tinggi penuh tanpa scroll vertikal </div> </section> <hr class="section-divider"> <!-- ======================================== VERTICAL DIAGRAM (LEFT-TO-RIGHT GRAPH) ======================================== --> <section> <div class="badge-center"> <span class="badge-title">📊 VERTICAL</span> </div> <div class="diagram-mega"> <div class="mermaid-inner"> <div class="mermaid">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 </div> </div> </div> <div class="foot-note"> ✦ Left-to-right orientation: <strong>main di kolom paling kiri</strong> · detail di kanan · mermaid v10<br> ⟷ lebar discroll horizontal · aliran kiri ke kanan (main → false/true → detail lebih kanan) </div> </section> <!-- ======================================== NOSCRIPT FALLBACK ======================================== --> <noscript> <div class="no-js-warning"> ⚠️ JavaScript diperlukan untuk menampilkan diagram Mermaid. </div> </noscript> <!-- ======================================== MERMAID INITIALIZATION ======================================== --> <script> mermaid.initialize({ startOnLoad: true, theme: "base", themeVariables: { background: "#ffffff", primaryColor: "#bbdefb", primaryTextColor: "#113355", primaryBorderColor: "#2a5f8a", lineColor: "#2b5f8a", secondaryColor: "#fce4d6", tertiaryColor: "#f0f4fa" }, flowchart: { useMaxWidth: false, htmlLabels: true, curve: "basis", padding: 20 }, securityLevel: "loose", deterministicIds: true }); </script></body></html>
Comments
Post a Comment