npm - minimal-vibe-coding-kit - Versions diffs - 0.5.1 → 0.5.2 - Mend

minimal-vibe-coding-kit 0.5.1 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (293) hide show

package/.grok/skills/mermaid/references/preview.html ADDED Viewed

@@ -0,0 +1,1143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Vivid Clay preset preview</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Be+Vietnam+Pro&display=swap" rel="stylesheet">
+<style>
+  body { background: #ffffff; font-family: trebuchet ms, verdana, arial, sans-serif; margin: 24px; }
+  h2 { margin: 40px 0 8px; border-bottom: 2px solid #eee; padding-bottom: 4px; }
+  .mermaid { background: #ffffff; font-family: cascadia mono, consolas, noto sans mono, menlo, monospace; }
+</style>
+</head>
+<body>
+<p><strong>Test-only gallery:</strong> loads pinned official Mermaid modules from jsDelivr.
+Run in an isolated browser profile with no secrets or user data.</p>
+<output id="render-status">Rendering diagrams…</output>
+<h2 id="s1">1. Flowchart</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+    clusterBkg: "#FFF9DB"
+    clusterBorder: "#444444"
+---
+flowchart TD
+  Start([Push to main]) --> Build(Build image)
+  Build --> Test(Run tests)
+  Test --> Q1{All green?}
+  Q1 -->|yes| Stage(Deploy to staging)
+  Q1 -->|no| Alert(Notify channel)
+  Alert --> End1([Abort])
+  Stage --> Q2{Smoke test OK?}
+  Q2 -->|yes| Prod(Deploy to prod)
+  Q2 -->|no| Roll(Rollback)
+  Roll --> Alert
+  Prod --> Done([Released])
+  classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  classDef danger fill:#FF8787,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Start,End1,Done terminal
+  class Build,Test,Stage step
+  class Q1,Q2 decision
+  class Prod success
+  class Alert,Roll danger
+</pre>
+<h2 id="s2">2. State diagram</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+---
+stateDiagram-v2
+  [*] --> Draft
+  Draft --> Review : submit
+  Review --> Draft : reject
+  Review --> Approved : approve
+  Approved --> Published : publish
+  Published --> [*]
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  class Draft,Published step
+  class Review decision
+  class Approved success
+</pre>
+<h2 id="s3">3. Class diagram</h2>
+<p>3a. doc-minimal repro (no themeVariables):</p>
+<pre class="mermaid">
+classDiagram
+    class Animal:::someclass
+    classDef someclass fill:#f96
+</pre>
+<p>3b. cssClass form + themeVariables:</p>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+---
+classDiagram
+  class Order {
+    +int id
+    +total() float
+  }
+  class Customer {
+    +string name
+  }
+  class Invoice {
+    +issue() void
+  }
+  Customer "1" --> "*" Order
+  Order --> Invoice
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef accent fill:#D0BFFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef data fill:#63E6BE,stroke:#444444,stroke-width:2px,color:#111111
+  cssClass "Order" step
+  cssClass "Customer" accent
+  cssClass "Invoice" data
+</pre>
+<p>3c. cssClass form, no frontmatter:</p>
+<pre class="mermaid">
+classDiagram
+  class Order {
+    +int id
+  }
+  class Customer {
+    +string name
+  }
+  Customer "1" --> "*" Order
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef accent fill:#D0BFFF,stroke:#444444,stroke-width:2px,color:#111111
+  cssClass "Order" step
+  cssClass "Customer" accent
+</pre>
+<h2 id="s4">4. ER diagram</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    primaryColor: "#8ECAFF"
+    primaryTextColor: "#111111"
+    primaryBorderColor: "#444444"
+    tertiaryColor: "#FFF9DB"
+---
+erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE_ITEM : contains
+  CUSTOMER {
+    int id PK
+    string name
+  }
+  ORDER {
+    int id PK
+    date created
+  }
+  LINE_ITEM {
+    int qty
+  }
+</pre>
+<h2 id="s5">5. Sequence diagram</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    actorBkg: "#8ECAFF"
+    actorBorder: "#444444"
+    actorTextColor: "#111111"
+    actorLineColor: "#777777"
+    signalColor: "#444444"
+    signalTextColor: "#111111"
+    activationBkgColor: "#FFD43B"
+    activationBorderColor: "#444444"
+    labelBoxBkgColor: "#D0BFFF"
+    labelBoxBorderColor: "#444444"
+    noteBkgColor: "#FFF9DB"
+    noteBorderColor: "#444444"
+    noteTextColor: "#111111"
+---
+sequenceDiagram
+  participant U as User
+  participant A as App
+  participant S as Auth Service
+  U->>+A: Submit credentials
+  A->>+S: POST /token
+  Note over S: Validate + issue JWT
+  alt valid
+    S-->>-A: 200 access_token
+    A-->>U: Redirect to dashboard
+  else invalid
+    S-->>A: 401
+    A-->>-U: Show error
+  end
+</pre>
+<h2 id="s6">6. Pie chart</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    pie1: "#8ECAFF"
+    pie2: "#FFD43B"
+    pie3: "#8CE99A"
+    pie4: "#FF8787"
+    pieStrokeColor: "#444444"
+    pieStrokeWidth: 1.5px
+    pieOuterStrokeColor: "#444444"
+    pieOuterStrokeWidth: 2px
+    pieOpacity: 1
+---
+pie
+  "Restore" : 25
+  "Compile" : 45
+  "Tests" : 20
+  "Package" : 10
+</pre>
+<h2 id="s7">7. Gantt</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    lineColor: "#444444"
+    sectionBkgColor: "#FFF9DB"
+    altSectionBkgColor: "#FFFFFF"
+    taskBkgColor: "#8ECAFF"
+    taskBorderColor: "#444444"
+    taskTextColor: "#111111"
+    taskTextOutsideColor: "#111111"
+    activeTaskBkgColor: "#FFD43B"
+    activeTaskBorderColor: "#444444"
+    doneTaskBkgColor: "#8CE99A"
+    doneTaskBorderColor: "#444444"
+    critBkgColor: "#FF8787"
+    critBorderColor: "#444444"
+    todayLineColor: "#FF8787"
+---
+gantt
+  title Release plan
+  dateFormat YYYY-MM-DD
+  section Build
+    Design        :done, d1, 2026-07-01, 5d
+    Implement     :active, d2, after d1, 10d
+  section Ship
+    QA            :crit, d3, after d2, 4d
+    Release       :d4, after d3, 1d
+</pre>
+<h2 id="s8">8. User journey</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    fillType0: "#8ECAFF"
+    fillType1: "#FFD43B"
+    fillType2: "#8CE99A"
+    fillType3: "#FF8787"
+    fillType4: "#D0BFFF"
+    fillType5: "#63E6BE"
+---
+journey
+  title Checkout experience
+  section Browse
+    Find product: 5: User
+    Compare: 3: User
+  section Buy
+    Add to cart: 4: User
+    Pay: 2: User, Support
+</pre>
+<h2 id="s9">9. Timeline</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    cScale0: "#339AF0"
+    cScale1: "#FAB005"
+    cScale2: "#40C057"
+    cScale3: "#9775FA"
+    cScaleLabel0: "#111111"
+    cScaleLabel1: "#111111"
+    cScaleLabel2: "#111111"
+    cScaleLabel3: "#111111"
+    cScaleInv0: "#444444"
+    cScaleInv1: "#444444"
+    cScaleInv2: "#444444"
+    cScaleInv3: "#444444"
+---
+timeline
+  title Repository safety evolution
+  section Source of truth
+    Backbone contract : Define project boundaries
+  section Path guardrails
+    Containment checks : Reject broad targets
+  section Verification
+    Mirror parity : Compare every surface
+  section Feedback loop
+    Evidence ledger : Keep or discard changes
+</pre>
+<h2 id="s10">10. Quadrant chart</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    quadrant1Fill: "#8CE99A"
+    quadrant2Fill: "#8ECAFF"
+    quadrant3Fill: "#FFF9DB"
+    quadrant4Fill: "#FF8787"
+    quadrant1TextFill: "#111111"
+    quadrant2TextFill: "#111111"
+    quadrant3TextFill: "#111111"
+    quadrant4TextFill: "#111111"
+    quadrantPointFill: "#111111"
+    quadrantPointTextFill: "#111111"
+    quadrantXAxisTextFill: "#111111"
+    quadrantYAxisTextFill: "#111111"
+    quadrantInternalBorderStrokeFill: "#444444"
+    quadrantExternalBorderStrokeFill: "#444444"
+---
+quadrantChart
+  title Feature priority
+  x-axis Low effort --> High effort
+  y-axis Low value --> High value
+  quadrant-1 Do now
+  quadrant-2 Plan
+  quadrant-3 Skip
+  quadrant-4 Avoid
+  Dark mode: [0.3, 0.8]
+  SSO: [0.7, 0.9]
+  Emoji picker: [0.2, 0.2]
+</pre>
+<h2 id="s11">11. XY chart</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  xyChart:
+    showDataLabel: true
+    showDataLabelOutsideBar: true
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    xyChart:
+      backgroundColor: "#FFFFFF"
+      titleColor: "#111111"
+      dataLabelColor: "#111111"
+      legendTextColor: "#111111"
+      xAxisLabelColor: "#111111"
+      xAxisTitleColor: "#111111"
+      xAxisTickColor: "#444444"
+      xAxisLineColor: "#444444"
+      yAxisLabelColor: "#111111"
+      yAxisTitleColor: "#111111"
+      yAxisTickColor: "#444444"
+      yAxisLineColor: "#444444"
+      plotColorPalette: "#339AF0, #FD7E14, #40C057, #FA5252"
+---
+xychart
+  title "Validation feedback time"
+  x-axis [Syntax, Install, Mirrors, Security, Pack]
+  y-axis "Feedback seconds" 0 --> 40
+  bar "Observed" [8, 31, 12, 14, 24]
+  line "Target" [20, 20, 20, 20, 20]
+</pre>
+<h2 id="s12">12. Git graph</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    git0: "#8ECAFF"
+    git1: "#FFD43B"
+    git2: "#8CE99A"
+    gitBranchLabel0: "#111111"
+    gitBranchLabel1: "#111111"
+    gitBranchLabel2: "#111111"
+    commitLabelColor: "#111111"
+    commitLabelBackground: "#FFF9DB"
+    tagLabelColor: "#111111"
+    tagLabelBackground: "#D0BFFF"
+    tagLabelBorder: "#444444"
+---
+gitGraph
+  commit id: "init"
+  branch develop
+  commit id: "feat-a"
+  branch feature
+  commit id: "wip"
+  checkout develop
+  merge feature
+  checkout main
+  merge develop tag: "v1.0"
+</pre>
+<h2 id="s13">13. Mindmap</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    lineColor: "#444444"
+    cScale0: "#8ECAFF"
+    cScale1: "#FFD43B"
+    cScale2: "#8CE99A"
+    cScale3: "#FF8787"
+    cScale4: "#D0BFFF"
+---
+mindmap
+  root((Platform))
+    Frontend
+      Web app
+      Mobile
+    Backend
+      API
+      Workers
+    Data
+      Warehouse
+</pre>
+<h2 id="s14">14. Swimlanes</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    primaryColor: "#8ECAFF"
+    primaryBorderColor: "#444444"
+    primaryTextColor: "#111111"
+    clusterBkg: "#FFF9DB"
+    clusterBorder: "#444444"
+    edgeLabelBackground: "#FFFFFF"
+---
+swimlane-beta LR
+  subgraph Customer
+    request[Request service]
+    receive[Receive update]
+  end
+  subgraph Support
+    triage[Triage request]
+    answer[Send answer]
+  end
+  request --> triage
+  triage -->|Known issue| answer
+  answer --> receive
+</pre>
+<h2 id="s15">15. Requirement diagram</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    primaryColor: "#8ECAFF"
+    primaryBorderColor: "#444444"
+    primaryTextColor: "#111111"
+---
+requirementDiagram
+  requirement login_req {
+    id: 1
+    text: Login must be secure
+    risk: high
+    verifymethod: test
+  }
+  element auth_service {
+    type: service
+  }
+  auth_service - satisfies -> login_req
+</pre>
+<h2 id="s16">16. C4 context</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+---
+C4Context
+  title Banking system context
+  Person(customer, "Customer", "A bank customer")
+  System(bank, "Banking System", "Handles accounts")
+  System_Ext(mail, "Mail System", "Sends emails")
+  Rel(customer, bank, "Uses")
+  Rel(bank, mail, "Sends mail via")
+  UpdateElementStyle(customer, $bgColor="#D0BFFF", $fontColor="#111111", $borderColor="#444444")
+  UpdateElementStyle(bank, $bgColor="#8ECAFF", $fontColor="#111111", $borderColor="#444444")
+  UpdateElementStyle(mail, $bgColor="#FFA94D", $fontColor="#111111", $borderColor="#444444")
+  UpdateRelStyle(customer, bank, $textColor="#111111", $lineColor="#444444", $offsetY="-20")
+  UpdateRelStyle(bank, mail, $textColor="#111111", $lineColor="#444444", $offsetY="-20")
+</pre>
+<h2 id="s17">17. Sankey</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+  sankey:
+    linkColor: gradient
+    labelStyle: outlined
+    nodeColors:
+      Traffic: "#8ECAFF"
+      Signup: "#8CE99A"
+      Bounce: "#FF8787"
+      Paid: "#FFD43B"
+      Free: "#D0BFFF"
+---
+sankey
+Traffic,Signup,60
+Traffic,Bounce,40
+Signup,Paid,25
+Signup,Free,35
+</pre>
+<h2 id="s18">18. Block diagram</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    primaryColor: "#8ECAFF"
+    primaryBorderColor: "#444444"
+    primaryTextColor: "#111111"
+---
+block
+columns 3
+  Frontend Backend Database[("Database")]
+  space:3
+  Cache[("Cache")]
+  Frontend --> Backend
+  Backend --> Database
+  Backend --> Cache
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef data fill:#63E6BE,stroke:#444444,stroke-width:2px,color:#111111
+  class Frontend,Backend step
+  class Database,Cache data
+</pre>
+<h2 id="s19">19. Packet</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+---
+packet
+title TCP header
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+</pre>
+<h2 id="s20">20. Kanban</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    # Mermaid 11.16 maps Kanban column 1 to cScale2.
+    cScale2: "#339AF0"
+    cScale3: "#FAB005"
+    cScale4: "#40C057"
+    cScale5: "#9775FA"
+    cScaleLabel2: "#111111"
+    cScaleLabel3: "#111111"
+    cScaleLabel4: "#111111"
+    cScaleLabel5: "#111111"
+---
+kanban
+  extract[Extract]
+    strings[Extract interface strings]@{ ticket: KIT-241, assigned: 'Lan', priority: 'High' }
+  verify[Verify]
+    glyphs[Check Vietnamese glyphs]@{ ticket: KIT-244, assigned: 'Minh', priority: 'Very High' }
+    keys[Validate catalog keys]@{ ticket: KIT-245, assigned: 'An', priority: 'High' }
+  review[Review]
+    translations[Review translations]@{ ticket: KIT-249, assigned: 'Hoa', priority: 'Low' }
+  ship[Ship]
+    catalogs[Publish language catalogs]@{ ticket: KIT-252, assigned: 'Vy', priority: 'Very Low' }
+</pre>
+<h2 id="s21">21. Architecture</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+---
+architecture-beta
+  group api(cloud)[API]
+  service db(database)[Database] in api
+  service server(server)[Server] in api
+  service gateway(internet)[Gateway]
+  db:L -- R:server
+  gateway:R -- L:server
+</pre>
+<h2 id="s22">22. Radar</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    cScale0: "#8ECAFF"
+    cScale1: "#FF8787"
+---
+radar-beta
+  title Team skills
+  axis c["Coding"], d["Design"], o["Ops"]
+  axis m["Comms"], l["Leadership"]
+  curve a["Ana"]{4, 3, 5, 2, 4}
+  curve b["Bob"]{2, 5, 3, 4, 3}
+  max 5
+  min 0
+</pre>
+<h2 id="s23">23. Event modeling</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+---
+eventmodeling
+tf 01 ui CartUI
+tf 02 cmd AddItem
+tf 03 evt ItemAdded
+tf 04 rmo CartView
+</pre>
+<h2 id="s24">24. Treemap</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    cScale0: "#8ECAFF"
+    cScale1: "#FFD43B"
+    cScale2: "#8CE99A"
+---
+treemap-beta
+"Frontend"
+    "Web": 40
+    "Mobile": 25
+"Backend"
+    "API": 30
+    "Workers": 15
+"Data"
+    "Warehouse": 20
+</pre>
+<h2 id="s25">25. Venn</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+---
+venn-beta
+  title Team overlap
+  set Frontend
+  set Backend
+  union Frontend,Backend["APIs"]
+  style Frontend fill:#8ECAFF,stroke:#444444,color:#111111,fill-opacity:0.6
+  style Backend fill:#8CE99A,stroke:#444444,color:#111111,fill-opacity:0.6
+  style Frontend,Backend color:#111111
+</pre>
+<h2 id="s26">26. Ishikawa</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    lineColor: "#444444"
+---
+ishikawa-beta
+    Slow deploys
+    Process
+        Manual approvals
+        No caching
+    People
+        Few reviewers
+    Tooling
+        Old CI runners
+</pre>
+<h2 id="s27">27. Wardley map</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    lineColor: "#444444"
+---
+wardley-beta
+title Tea shop value chain
+anchor Business [0.95, 0.63]
+component Cup of Tea [0.79, 0.61]
+component Hot Water [0.52, 0.80]
+component Kettle [0.43, 0.35]
+Business -> Cup of Tea
+Cup of Tea -> Hot Water
+Hot Water -> Kettle
+evolve Kettle 0.62
+</pre>
+<h2 id="s28">28. Cynefin</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+---
+cynefin-beta
+title Problem domains
+complex
+"New market experiment"
+complicated
+"Performance tuning"
+clear
+"Password reset flow"
+chaotic
+"Production outage"
+confusion
+"Unclassified incident"
+</pre>
+<h2 id="s29">29. TreeView</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    treeView:
+      labelColor: "#111111"
+      lineColor: "#444444"
+---
+treeView-beta
+    my-project/
+        src/
+            index.ts
+            utils.ts
+        package.json
+        README.md
+</pre>
+<h2 id="s30">30. ZenUML (plugin required)</h2>
+<!-- ZenUML header clips ~50px with any container stack (pre-existing plugin issue) -->
+<pre class="mermaid">
+zenuml
+  title Order flow
+  Client->Server.order() {
+    Server->DB.save()
+  }
+</pre>
+<h2 id="s31">31. Railroad (EBNF)</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    textColor: "#111111"
+    lineColor: "#444444"
+---
+railroad-ebnf-beta
+title "Digit Definition"
+digit = "0" | "1" | "2" | "3" ;
+number = digit , { digit } ;
+</pre>
+<h2 id="s32">32. Typography test — JetBrains Mono variant</h2>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: JetBrains Mono, Cascadia Code, Consolas, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart TD
+  Start([Push to main]) --> Build(Build image)
+  Build --> Test(Run tests)
+  Test --> Q1{All green?}
+  Q1 -->|yes| Stage(Deploy to staging)
+  Q1 -->|no| Alert(Notify channel)
+  Alert --> End1([Abort])
+  Stage --> Q2{Smoke test OK?}
+  Q2 -->|yes| Prod(Deploy to prod)
+  Q2 -->|no| Roll(Rollback)
+  Roll --> Alert
+  Prod --> Done([Released])
+  classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  classDef danger fill:#FF8787,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Start,End1,Done terminal
+  class Build,Test,Stage step
+  class Q1,Q2 decision
+  class Prod success
+  class Alert,Roll danger
+</pre>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: JetBrains Mono, Cascadia Code, Consolas, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    primaryColor: "#8ECAFF"
+    primaryTextColor: "#111111"
+    primaryBorderColor: "#444444"
+    tertiaryColor: "#FFF9DB"
+---
+erDiagram
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE_ITEM : contains
+  CUSTOMER {
+    int id PK
+    string name
+  }
+  ORDER {
+    int id PK
+    date created
+  }
+  LINE_ITEM {
+    int qty
+  }
+</pre>
+<h2 id="s33">33. Typography test — Vietnamese</h2>
+<p>33a. Repro — default trebuchet stack with Vietnamese labels. Trebuchet MS has no Vietnamese
+glyphs, so marked letters fall back to Verdana and each word mixes two typefaces — and labels
+clip (canvas measure falls back differently than the DOM draw; ~34px measured here). Kept only
+to show the failure — do not copy:</p>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: trebuchet ms, verdana, arial, sans-serif
+    fontSize: 16px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart LR
+  Doc(Đọc yêu cầu triển khai) --> Kiem(Kiểm thử hệ thống dữ liệu)
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Doc,Kiem step
+</pre>
+<p>33b. Sans option (segoe ui, verdana, arial) — Vietnamese-safe; no sans-serif generic,
+the sanitizer voids dash tokens (mermaid#6256):</p>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: segoe ui, verdana, arial
+    fontSize: 16px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart TD
+  Bat([Bắt đầu]) --> Doc(Đọc yêu cầu)
+  Doc --> Chuan(Chuẩn bị dữ liệu)
+  Chuan --> Kiem(Kiểm thử hệ thống)
+  Kiem --> San{Sẵn sàng vận hành?}
+  San -->|đạt| Tra(Thanh toán 500.000₫)
+  San -->|chưa đạt| Go(Gỡ lỗi phần mềm)
+  Go --> Kiem
+  Tra --> Xong([Hoàn tất])
+  classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  classDef danger fill:#FF8787,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Bat,Xong terminal
+  class Doc,Chuan,Kiem step
+  class San decision
+  class Tra success
+  class Go danger
+</pre>
+<p>33c. Be Vietnam Pro web font — pages you control, loaded with a Vietnamese sample string:</p>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: Be Vietnam Pro, segoe ui, verdana, arial
+    fontSize: 16px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart TD
+  Bat([Bắt đầu]) --> Doc(Đọc yêu cầu)
+  Doc --> Chuan(Chuẩn bị dữ liệu)
+  Chuan --> Kiem(Kiểm thử hệ thống)
+  Kiem --> San{Sẵn sàng vận hành?}
+  San -->|đạt| Tra(Thanh toán 500.000₫)
+  San -->|chưa đạt| Go(Gỡ lỗi phần mềm)
+  Go --> Kiem
+  Tra --> Xong([Hoàn tất])
+  classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  classDef danger fill:#FF8787,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Bat,Xong terminal
+  class Doc,Chuan,Kiem step
+  class San decision
+  class Tra success
+  class Go danger
+</pre>
+<p>33d. Web-font mono with Vietnamese labels (JetBrains Mono, loaded with a Vietnamese sample):</p>
+<pre class="mermaid">
+---
+config:
+  theme: base
+  themeVariables:
+    fontFamily: JetBrains Mono, Cascadia Code, Consolas, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart LR
+  A(Đọc tệp cấu hình) --> B{Hợp lệ?}
+  B -->|đúng| C(Ghi kết quả)
+  B -->|sai| D(Báo lỗi — dừng)
+  classDef step fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef decision fill:#FFD43B,stroke:#444444,stroke-width:2px,color:#111111
+  classDef success fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  classDef danger fill:#FF8787,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class A step
+  class B decision
+  class C success
+  class D danger
+</pre>
+<h2 id="s34">34. Debug heat map</h2>
+<pre class="mermaid">
+---
+config:
+  securityLevel: strict
+  theme: base
+  themeVariables:
+    fontFamily: cascadia mono, consolas, noto sans mono, menlo, monospace
+    fontSize: 15px
+    lineColor: "#444444"
+    textColor: "#111111"
+    edgeLabelBackground: "#FFFFFF"
+---
+flowchart TD
+  Incoming([Webhook received]) --> Signature{Signature valid?}
+  Signature -->|no| Rejected([Reject request])
+  Signature -->|yes| Dedupe(Build dedupe key)
+  Dedupe --> Seen{Key already seen?}
+  Seen -->|yes| Accepted([Acknowledge])
+  Seen -->|no| Queue(Enqueue event)
+  Queue --> Ledger(Write delivery ledger)
+  Ledger --> Worker(Process event)
+  Worker --> Complete([Complete])
+  classDef terminal fill:#111111,stroke:#444444,stroke-width:2px,color:#FFFFFF
+  classDef riskHigh fill:#FA5252,stroke:#444444,stroke-width:2px,color:#111111
+  classDef riskMed fill:#FFA94D,stroke:#444444,stroke-width:2px,color:#111111
+  classDef normal fill:#8ECAFF,stroke:#444444,stroke-width:2px,color:#111111
+  classDef verified fill:#8CE99A,stroke:#444444,stroke-width:2px,color:#111111
+  linkStyle default stroke:#444444,stroke-width:1.5px
+  class Incoming,Rejected,Accepted,Complete terminal
+  class Signature verified
+  class Dedupe riskHigh
+  class Queue riskMed
+  class Seen,Ledger,Worker normal
+</pre>
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.16.0/dist/mermaid.esm.min.mjs';
+  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.2.2/dist/mermaid-zenuml.esm.min.mjs';
+  window.mermaid = mermaid;
+  await mermaid.registerExternalDiagrams([zenuml]);
+  mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+  if (document.readyState !== 'complete') {
+    await new Promise((r) => window.addEventListener('load', r));
+  }
+  // Web fonts must be fully loaded BEFORE mermaid measures text,
+  // otherwise labels are measured with the fallback font and clip.
+  // The Vietnamese sample string pulls the vietnamese unicode-range
+  // files too — the default sample (a space) fetches latin only.
+  const vnSample = 'Đọc dữ liệu, gỡ lỗi — 500.000₫';
+  await Promise.all([
+    document.fonts.load('15px "JetBrains Mono"', vnSample),
+    document.fonts.load('16px "Be Vietnam Pro"', vnSample),
+  ]);
+  await document.fonts.ready;
+  try {
+    await mermaid.run();
+    document.getElementById('render-status').textContent = 'Render status: PASS';
+  } catch (e) {
+    console.warn('mermaid run error:', e);
+    document.getElementById('render-status').textContent = `Render status: FAIL — ${e.message}`;
+    window.__mermaidError = String(e);
+  }
+  window.__mermaidDone = true;
+</script>
+</body>
+</html>