Skip to main content

Mermaid Diagram of Today

Parameter Passing Fundamentals

Pass-by-Value vs Pass-by-Reference — Visualized

Loading Diagram 1 ...

Failed to load

Loading Diagram 2 ...

Failed to load

Loading Diagram 3 ...

Failed to load

Diagrams Failed to Load

Unable to render the diagrams. Please try again.

Mermaid library failed to load. Please refresh.

<!-- 
  ─────────────────────────────────────────────────────────────
  PARAMETER PASSING INFOGRAPHIC - EMOJI FIXED
  All emojis replaced with text/symbols for 100% compatibility
  ─────────────────────────────────────────────────────────────
-->

<style>
  /* ═══════════════════════════════════════════════════════════
     RESET & BASE STYLES
     ═══════════════════════════════════════════════════════════ */
  .mermaid-container * {
    box-sizing: border-box;
  }

  .mermaid-container {
    max-width: 100%;
    width: 100%;
    margin: 20px auto;
    padding: 25px 20px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    overflow-x: auto;
    overflow-y: visible;
  }

  .mermaid-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    overflow: visible;
  }

  .mermaid-container h2 {
    text-align: center;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 2rem;
    margin: 0 0 4px 0;
    letter-spacing: -0.5px;
  }

  .mermaid-container .subtitle {
    text-align: center;
    color: #6c757d;
    font-size: 1.05rem;
    margin: 0 0 25px 0;
    border-bottom: 2px solid #f0f0f5;
    padding-bottom: 16px;
    font-weight: 400;
  }

  .mermaid-wrapper {
    background: #fafbfc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    margin: 18px 0;
    min-height: 150px;
    position: relative;
    overflow: visible;
    width: 100%;
  }

  .mermaid-wrapper:last-child {
    margin-bottom: 0;
  }

  /* ═══════════════════════════════════════════════════════════
     LOADER SPINNER
     ═══════════════════════════════════════════════════════════ */
  .mermaid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 14px;
    width: 100%;
  }

  .mermaid-loader .spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e9ecef;
    border-top: 4px solid #4a6cf7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .mermaid-loader p {
    color: #6c757d;
    font-size: 0.9rem;
    margin: 0;
  }

  .mermaid-loader .error-msg {
    color: #dc3545;
    font-size: 0.85rem;
    display: none;
  }

  /* ═══════════════════════════════════════════════════════════
     RENDERED DIAGRAM
     ═══════════════════════════════════════════════════════════ */
  .mermaid-rendered {
    display: none;
    text-align: center;
    overflow: visible;
    width: 100%;
    max-width: 100%;
  }

  .mermaid-rendered svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .mermaid-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
  }

  .mermaid-scroll svg {
    min-width: 600px;
    max-width: 100%;
    height: auto;
  }

  /* ═══════════════════════════════════════════════════════════
     TEXT WRAPPING FIX
     ═══════════════════════════════════════════════════════════ */
  
  .mermaid-rendered .label,
  .mermaid-rendered .nodeLabel,
  .mermaid-rendered .edgeLabel,
  .mermaid-rendered .cluster-label,
  .mermaid-rendered .label span,
  .mermaid-rendered .nodeLabel span,
  .mermaid-rendered .edgeLabel span,
  .mermaid-rendered span.label,
  .mermaid-rendered span.nodeLabel {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    max-width: 120px !important;
    display: inline-block !important;
    min-height: 20px !important;
    height: auto !important;
  }

  .mermaid-rendered .edgeLabel,
  .mermaid-rendered .edgeLabel span {
    max-width: 60px !important;
    font-size: 10px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
    display: inline-block !important;
    height: auto !important;
    min-height: 16px !important;
  }

  .mermaid-rendered .cluster-label,
  .mermaid-rendered .cluster-label span {
    max-width: 160px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    display: inline-block !important;
    height: auto !important;
    min-height: 24px !important;
  }

  .mermaid-rendered .node rect,
  .mermaid-rendered .node circle,
  .mermaid-rendered .node polygon {
    width: auto !important;
    height: auto !important;
    min-height: 40px !important;
  }

  .mermaid-rendered .cluster rect {
    width: auto !important;
    height: auto !important;
  }

  .mermaid-rendered .node div {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    max-width: 120px !important;
    padding: 6px 8px !important;
    height: auto !important;
    min-height: 30px !important;
  }

  .mermaid-rendered .node tspan {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
  }

  .mermaid-rendered .node foreignObject {
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
  }

  .mermaid-rendered .node foreignObject div {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
    max-width: 120px !important;
    padding: 4px 6px !important;
    height: auto !important;
    min-height: 24px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════════ */
  
  @media (max-width: 992px) {
    .mermaid-inner {
      max-width: 100%;
    }
    .mermaid-container {
      padding: 20px 15px;
    }
    .mermaid-wrapper {
      padding: 15px 12px;
    }
    .mermaid-rendered .label,
    .mermaid-rendered .nodeLabel,
    .mermaid-rendered .label span,
    .mermaid-rendered .nodeLabel span,
    .mermaid-rendered .node div,
    .mermaid-rendered .node foreignObject div {
      max-width: 100px !important;
      font-size: 13px !important;
    }
    .mermaid-rendered .cluster-label {
      max-width: 140px !important;
      font-size: 13px !important;
    }
  }

  @media (max-width: 768px) {
    .mermaid-container {
      padding: 14px 10px;
    }
    .mermaid-container h2 {
      font-size: 1.4rem;
    }
    .mermaid-container .subtitle {
      font-size: 0.9rem;
    }
    .mermaid-wrapper {
      padding: 12px 8px;
      min-height: 100px;
    }
    .mermaid-rendered .label,
    .mermaid-rendered .nodeLabel,
    .mermaid-rendered .label span,
    .mermaid-rendered .nodeLabel span,
    .mermaid-rendered .node div,
    .mermaid-rendered .node foreignObject div {
      max-width: 80px !important;
      font-size: 11px !important;
      line-height: 1.3 !important;
    }
    .mermaid-rendered .edgeLabel,
    .mermaid-rendered .edgeLabel span {
      max-width: 50px !important;
      font-size: 9px !important;
    }
    .mermaid-rendered .cluster-label {
      max-width: 120px !important;
      font-size: 12px !important;
    }
    .mermaid-scroll svg {
      min-width: 500px;
    }
    .mermaid-rendered .node rect {
      min-height: 32px !important;
    }
  }

  @media (max-width: 480px) {
    .mermaid-container {
      padding: 10px 6px;
    }
    .mermaid-container h2 {
      font-size: 1.1rem;
    }
    .mermaid-wrapper {
      padding: 8px 4px;
      min-height: 80px;
      margin: 10px 0;
    }
    .mermaid-rendered .label,
    .mermaid-rendered .nodeLabel,
    .mermaid-rendered .label span,
    .mermaid-rendered .nodeLabel span,
    .mermaid-rendered .node div,
    .mermaid-rendered .node foreignObject div {
      max-width: 60px !important;
      font-size: 9px !important;
      line-height: 1.2 !important;
      padding: 3px 4px !important;
    }
    .mermaid-rendered .edgeLabel,
    .mermaid-rendered .edgeLabel span {
      max-width: 40px !important;
      font-size: 8px !important;
    }
    .mermaid-rendered .cluster-label {
      max-width: 100px !important;
      font-size: 10px !important;
    }
    .mermaid-scroll svg {
      min-width: 400px;
    }
    .mermaid-rendered .node rect {
      min-height: 28px !important;
    }
  }

  /* ═══════════════════════════════════════════════════════════
     FALLBACK & ERROR STATES
     ═══════════════════════════════════════════════════════════ */
  .mermaid-fallback {
    display: none;
    padding: 20px;
    background: #f8d7da;
    border-radius: 8px;
    color: #721c24;
    text-align: center;
    width: 100%;
  }

  .mermaid-fallback a {
    color: #0056b3;
    text-decoration: underline;
    cursor: pointer;
  }

  .mermaid-error-state {
    display: none;
    padding: 30px 20px;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 8px;
    text-align: center;
    width: 100%;
  }

  .mermaid-error-state h4 {
    margin: 0 0 8px 0;
    color: #856404;
  }

  .mermaid-error-state p {
    margin: 0;
    color: #856404;
    font-size: 0.9rem;
  }

  .mermaid-error-state .retry-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 24px;
    background: #4a6cf7;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
  }

  .mermaid-error-state .retry-btn:hover {
    background: #3a56d4;
  }
</style>

<!-- ═══════════════════════════════════════════════════════════
     MAIN CONTAINER
     ═══════════════════════════════════════════════════════════ -->
<div class="mermaid-container" id="param-infographic">
  
  <div class="mermaid-inner">

    <h2>Parameter Passing Fundamentals</h2>
    <p class="subtitle">Pass-by-Value vs Pass-by-Reference — Visualized</p>

    <!-- ─── DIAGRAM 1: OVERVIEW ─── -->
    <div class="mermaid-wrapper" id="wrapper-1">
      <div class="mermaid-loader" id="loader-1">
        <div class="spinner"></div>
        <p>Loading Diagram 1 ...</p>
        <div class="error-msg" id="error-1">Failed to load</div>
      </div>
      <div class="mermaid-rendered" id="output-1">
        <div class="mermaid-scroll"></div>
      </div>
    </div>

    <!-- ─── DIAGRAM 2: COMPARISON ─── -->
    <div class="mermaid-wrapper" id="wrapper-2">
      <div class="mermaid-loader" id="loader-2">
        <div class="spinner"></div>
        <p>Loading Diagram 2 ...</p>
        <div class="error-msg" id="error-2">Failed to load</div>
      </div>
      <div class="mermaid-rendered" id="output-2">
        <div class="mermaid-scroll"></div>
      </div>
    </div>

    <!-- ─── DIAGRAM 3: DECISION MATRIX ─── -->
    <div class="mermaid-wrapper" id="wrapper-3">
      <div class="mermaid-loader" id="loader-3">
        <div class="spinner"></div>
        <p>Loading Diagram 3 ...</p>
        <div class="error-msg" id="error-3">Failed to load</div>
      </div>
      <div class="mermaid-rendered" id="output-3">
        <div class="mermaid-scroll"></div>
      </div>
    </div>

    <!-- ─── ERROR STATE ─── -->
    <div class="mermaid-error-state" id="error-state">
      <h4>Diagrams Failed to Load</h4>
      <p>Unable to render the diagrams. Please try again.</p>
      <button class="retry-btn" onclick="location.reload()">Retry</button>
    </div>

    <!-- ─── FALLBACK ─── -->
    <div class="mermaid-fallback" id="fallback">
      <p>Mermaid library failed to load. Please <a href="javascript:location.reload()">refresh</a>.</p>
    </div>

  </div>
</div>

<!-- ═══════════════════════════════════════════════════════════
     MERMAID CDN (STABLE VERSION)
     ═══════════════════════════════════════════════════════════ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js">
</script>

<!-- ═══════════════════════════════════════════════════════════
     RENDER ENGINE
     ═══════════════════════════════════════════════════════════ -->
<script>
  (function() {
    "use strict";

    /* ─────────────────────────────────────────────────────────
       DIAGRAM DEFINITIONS - NO EMOJIS, PLAIN TEXT ONLY
       ───────────────────────────────────────────────────────── */

    var DIAGRAMS = {

      /* ─── DIAGRAM 1: OVERVIEW ─── */
      overview: `
        flowchart TB
          subgraph TITLE[" "]
            direction LR
            A[("Data Transfer")]
          end

          subgraph PV["PASS-BY-VALUE"]
            direction TB
            P1["Caller: x = 10"]
            P2["COPY bits"]
            P3["Callee: x = 10 (new)"]
            P4["Modifies copy only"]
            P5["Original safe"]
            P1 --> P2 --> P3 --> P4 --> P5
          end

          subgraph PR["PASS-BY-REFERENCE"]
            direction TB
            R1["Caller: x = 10"]
            R2["PASS address"]
            R3["Callee: ref -> x"]
            R4["Modifies original"]
            R5["Original mutated"]
            R1 --> R2 --> R3 --> R4 --> R5
          end

          TITLE --> PV
          TITLE --> PR

          classDef title fill:#4a6cf7,color:#fff,stroke:#4a6cf7,stroke-width:2px;
          classDef box fill:#f8f9fc,stroke:#4a6cf7,stroke-width:2px;
          classDef safe fill:#d4edda,stroke:#28a745,stroke-width:2px;
          classDef warn fill:#f8d7da,stroke:#dc3545,stroke-width:2px;

          class A title;
          class P1,P2,P3,P4,R1,R2,R3,R4 box;
          class P5 safe;
          class R5 warn;
      `,

      /* ─── DIAGRAM 2: COMPARISON ─── */
      comparison: `
        flowchart LR
          subgraph Value["PASS-BY-VALUE"]
            direction TB
            V1["Copy Semantics"]
            V2["New memory"]
            V3["Original safe"]
            V4["O(n) time"]
            V5["Primitives"]
            V1 --> V2 --> V3 --> V4 --> V5
          end

          subgraph Reference["PASS-BY-REFERENCE"]
            direction TB
            R1["Alias Semantics"]
            R2["Address only"]
            R3["Original mutable"]
            R4["O(1) time"]
            R5["Arrays"]
            R1 --> R2 --> R3 --> R4 --> R5
          end

          classDef valHead fill:#4a6cf7,color:#fff,stroke:#4a6cf7,stroke-width:2px;
          classDef refHead fill:#dc3545,color:#fff,stroke:#dc3545,stroke-width:2px;
          classDef val fill:#e8f0fe,stroke:#4a6cf7,stroke-width:2px;
          classDef ref fill:#fce8e8,stroke:#dc3545,stroke-width:2px;

          class V1 valHead;
          class R1 refHead;
          class V2,V3,V4,V5 val;
          class R2,R3,R4,R5 ref;
      `,

      /* ─── DIAGRAM 3: DECISION MATRIX ─── */
      decision: `
        flowchart TD
          START["Start"] --> Q1["Data small?"]
          Q1 -->|YES| VAL["Pass-by-Value"]
          Q1 -->|NO| Q2["Need modify?"]
          Q2 -->|YES| REF["Pass-by-Reference"]
          Q2 -->|NO| Q3["Read-only?"]
          Q3 -->|YES| CONST["const / in"]
          Q3 -->|NO| VAL2["Pass-by-Value"]

          VAL --> END["Done"]
          REF --> END
          CONST --> END
          VAL2 --> END

          classDef start fill:#4a6cf7,color:#fff,stroke:#4a6cf7,stroke-width:2px;
          classDef q fill:#fff3cd,stroke:#ffc107,stroke-width:2px;
          classDef ans fill:#d4edda,stroke:#28a745,stroke-width:2px;
          classDef constAns fill:#cce5ff,stroke:#007bff,stroke-width:2px;

          class START,END start;
          class Q1,Q2,Q3 q;
          class VAL,REF,VAL2 ans;
          class CONST constAns;
      `
    };

    /* ─────────────────────────────────────────────────────────
       MERMAID CONFIG
       ───────────────────────────────────────────────────────── */

    var CONFIG = {
      theme: "base",
      themeVariables: {
        primaryColor: "#4a6cf7",
        primaryTextColor: "#1a1a2e",
        primaryBorderColor: "#4a6cf7",
        lineColor: "#4a6cf7",
        secondaryColor: "#f0f4ff",
        tertiaryColor: "#fafbfc",
        fontFamily: "Segoe UI, Arial, sans-serif",
        fontSize: "14px",
        nodeBorder: "2px solid #4a6cf7",
        mainBkg: "#ffffff",
        edgeLabelBackground: "#ffffff"
      },
      flowchart: {
        useMaxWidth: true,
        htmlLabels: false,
        curve: "basis",
        padding: 15
      }
    };

    /* ─────────────────────────────────────────────────────────
       RENDER FUNCTION
       ───────────────────────────────────────────────────────── */

    function renderDiagram(id, definition, loaderId, outputId, errorId) {
      var loader = document.getElementById(loaderId);
      var output = document.getElementById(outputId);
      var error = document.getElementById(errorId);

      if (!loader || !output) return;

      loader.style.display = "flex";
      output.style.display = "none";
      if (error) error.style.display = "none";

      if (typeof mermaid === "undefined") {
        if (error) {
          error.style.display = "block";
          error.textContent = "Mermaid library not loaded";
        }
        loader.querySelector("p").textContent = "Mermaid not loaded";
        return;
      }

      mermaid.render(id, definition)
        .then(function(result) {
          var scrollContainer = output.querySelector(".mermaid-scroll");
          if (scrollContainer) {
            scrollContainer.innerHTML = result.svg;
          } else {
            output.innerHTML = result.svg;
          }
          output.style.display = "block";
          loader.style.display = "none";
        })
        .catch(function(err) {
          console.error("Render error:", err);
          if (error) {
            error.style.display = "block";
            error.textContent = "Error: " + (err.message || "Failed to render");
          }
          loader.querySelector("p").textContent = "Error loading diagram";
        });
    }

    /* ─────────────────────────────────────────────────────────
       INITIALIZATION WITH RETRY LOGIC
       ───────────────────────────────────────────────────────── */

    function initDiagrams() {
      var tries = 0;
      var maxTries = 20;
      var errorState = document.getElementById("error-state");

      function attemptRender() {
        tries++;

        if (typeof mermaid !== "undefined" && mermaid.initialize) {
          try {
            mermaid.initialize(CONFIG);

            renderDiagram(
              "mermaid-1",
              DIAGRAMS.overview,
              "loader-1",
              "output-1",
              "error-1"
            );
            renderDiagram(
              "mermaid-2",
              DIAGRAMS.comparison,
              "loader-2",
              "output-2",
              "error-2"
            );
            renderDiagram(
              "mermaid-3",
              DIAGRAMS.decision,
              "loader-3",
              "output-3",
              "error-3"
            );

            if (errorState) errorState.style.display = "none";
            return;
          } catch (e) {
            console.error("Mermaid init error:", e);
          }
        }

        if (tries < maxTries) {
          setTimeout(attemptRender, 500);
        } else {
          if (errorState) errorState.style.display = "block";
          var fallback = document.getElementById("fallback");
          if (fallback) fallback.style.display = "block";
          for (var i = 1; i <= 3; i++) {
            var loader = document.getElementById("loader-" + i);
            if (loader) {
              loader.querySelector("p").textContent = "Failed to load";
              var err = document.getElementById("error-" + i);
              if (err) err.style.display = "block";
            }
          }
        }
      }

      if (document.readyState === "complete") {
        attemptRender();
      } else {
        window.addEventListener("load", attemptRender);
      }
    }

    initDiagrams();

  })();
</script>

<!-- ═══════════════════════════════════════════════════════════
     NOSCRIPT FALLBACK
     ═══════════════════════════════════════════════════════════ -->
<noscript>
  <div style="padding:20px;background:#f8d7da;border-radius:8px;color:#721c24;text-align:center;font-family:Arial,sans-serif;width:100%;">
    Please enable JavaScript to view the interactive diagrams.
  </div>
</noscript>

Comments

Post a Comment

Popular posts from this blog

Utk yg mo Bantu2 Keuangan saya
..monggo ke Bank Central Asia BCA 5520166779 a.n. Andreas Tparlaungan Manurung (Indonesia)


For those who would like to help support my finances
..please feel free to send it to Bank Central Asia (BCA) account number 5520166779 under the name Andreas Tparlaungan Manurung (Indonesia)

ANDREAS TOMMY PARLAUNGAN MANURUNG SHARED POOLING ACCOUNT MY ANDROID APKs PAGE please download here! REFRESH PAGE aka CHECK LATEST UPDATE! DOWNLOAD "SHOWING" POOL OF MY ANDROID-APK(s) aka APK CONTAINING LIST OF ALL MY ANDROID-APK(s) APP CLICK HERE FOR ALWAYS BEING UPDATED FOR MY LATEST APK! CONTOH HASIL "PROGRAM" App: Prompts' Guide aka TEMPLATE-HELPERs click here to download! Youtube and Instagram EMBEDded to Blogger/Blogspot.com SOURCE CODE Click this box to download 📥 TikTok EMBEDded to Blogger/Blogspot.com SOURCE CODE Input: BrowserLINK (mandatory) Click this box to download SHORTCUT-APPs note :  "precise" click to download R8: ronin1985.blogspot.com R2M: ronin-manu.blogspot.com Helping Download(ing) OnlineVIDEO! ...
Post a Comment
Read more

[ERROR BUG]
ChatGPT+Gemini: TikTok → Blogger Embed Converter using Cloudflare/Online Server

🔄 Refresh Page ERROR BUG: The connection is blocked because it was initiated by a public page to connect to devices or servers on your local network. Planning: Revise Program CODE Code USING Javascript/Online Server Code NOT USING Javascript Sample Working Code aka Already Repaired! Temporary Solution is by Asking AI Assistant to do REPAIR CODE of (Not yet Repaired) Current Conversion Program Code-Output TikTok Archive – Embedded Preview TikTok Embed ▶ View this video on TikTok ⚠️ DISCLAIMER: INPUT URL LIMITATION This program is currently restricted to processing Full Browser URLs only. It does not support TikTok’s mobile "short-link" format (e.g., vt.tiktok.com ). Required Action: Users must open the video in a web browser and copy the expanded URL from the address bar before pasting it into this program. URL Conversion Example ❌ UNSUPPORTED: https://vt.tiktok.com/ZSaXoFyov/ ✅ REQ...
Post a Comment
Read more

REPOST: Studying WATER PUMP by ROMAN ENGINEERING

*^ Ini yg Asli Gan! Mekanisme pada Concrete Pump: Kok ky Sistem Mekanik Romawi ya?! Tapi malah bisa HANYA pake PER aka bukan "MATA BOR look a like" Mekanisme Drill yg Cost Pembuatan bikin REPOT aka harus Tool SUPER Khusus Dari Material Besi yg digunakan terlihat langsung secara kasat mata Jauh Lebih Banyak drpd Per Biasa seperti yg ditunjukkan pd Video Alternatif dgn Penggunaan PER Video dr Instagram: Source: YouTube Rome's drainage machines #history #romanempire #engineering
Post a Comment
Read more