PyPI - yycode - Versions diffs - 0.3.2__py3-none-any.whl - Mend

yycode 0.3.2__py3-none-any.whl

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 (131) hide show

agent/__init__.py +33 -0
agent/acp/__init__.py +2 -0
agent/acp/approval_adapter.py +134 -0
agent/acp/content_adapter.py +45 -0
agent/acp/jsonrpc.py +92 -0
agent/acp/server.py +197 -0
agent/acp/session_manager.py +193 -0
agent/acp/update_adapter.py +192 -0
agent/app_paths.py +25 -0
agent/approval.py +169 -0
agent/cancellation.py +52 -0
agent/change_snapshot.py +186 -0
agent/context_compressor.py +116 -0
agent/graph.py +137 -0
agent/llm_retry.py +434 -0
agent/logger.py +97 -0
agent/lsp/__init__.py +13 -0
agent/lsp/client.py +151 -0
agent/lsp/manager.py +234 -0
agent/lsp/types.py +119 -0
agent/message_context_manager.py +322 -0
agent/message_format.py +105 -0
agent/nodes/llm_node.py +58 -0
agent/nodes/state.py +12 -0
agent/nodes/task_guard_node.py +50 -0
agent/nodes/tools_node.py +70 -0
agent/plan_snapshot.py +70 -0
agent/providers/__init__.py +13 -0
agent/providers/anthropic_provider.py +268 -0
agent/providers/base.py +52 -0
agent/providers/openai_provider.py +279 -0
agent/providers/text_tool_calls.py +118 -0
agent/runtime/approval_service.py +184 -0
agent/runtime/context.py +43 -0
agent/runtime/tool_events.py +368 -0
agent/runtime/tool_executor.py +208 -0
agent/runtime/tool_output.py +261 -0
agent/runtime/tool_registry.py +91 -0
agent/runtime/tool_scheduler.py +35 -0
agent/runtime/workflow_guard.py +217 -0
agent/runtime/workspace.py +5 -0
agent/runtime/workspace_tools.py +22 -0
agent/session.py +787 -0
agent/session_replay.py +95 -0
agent/session_store.py +186 -0
agent/skills.py +254 -0
agent/streaming.py +248 -0
agent/subagent.py +634 -0
agent/task_memory.py +340 -0
agent/todo_manager.py +304 -0
agent/tool_retry.py +106 -0
agent/tui/__init__.py +14 -0
agent/tui/app.py +1325 -0
agent/tui/approval.py +53 -0
agent/tui/commands/__init__.py +6 -0
agent/tui/commands/base.py +48 -0
agent/tui/commands/clear.py +37 -0
agent/tui/commands/help.py +27 -0
agent/tui/commands/registry.py +94 -0
agent/tui/help_content.py +108 -0
agent/tui/renderers.py +1961 -0
agent/tui/runner.py +439 -0
agent/tui/state.py +653 -0
main.py +465 -0
tools/__init__.py +50 -0
tools/apply_patch.py +305 -0
tools/bash.py +76 -0
tools/diff_utils.py +139 -0
tools/edit_file.py +40 -0
tools/git_diff.py +72 -0
tools/git_show.py +65 -0
tools/grep.py +149 -0
tools/list_files.py +90 -0
tools/list_skills.py +24 -0
tools/load_skill.py +30 -0
tools/lsp_definition.py +27 -0
tools/lsp_diagnostics.py +32 -0
tools/lsp_document_symbols.py +23 -0
tools/lsp_hover.py +29 -0
tools/lsp_references.py +37 -0
tools/lsp_utils.py +38 -0
tools/lsp_workspace_symbols.py +23 -0
tools/read_file.py +61 -0
tools/read_many_files.py +50 -0
tools/safety.py +50 -0
tools/subagent.py +57 -0
tools/todo.py +89 -0
tools/verify.py +107 -0
tools/web_search.py +250 -0
tools/workspace.py +36 -0
tools/workspace_state.py +60 -0
tools/write_file.py +88 -0
utils/__init__.py +5 -0
utils/retry.py +13 -0
yycode-0.3.2.data/data/skills/code_review.md +61 -0
yycode-0.3.2.data/data/skills/code_workflow.md +404 -0
yycode-0.3.2.data/data/skills/drawio/SKILL.md +636 -0
yycode-0.3.2.data/data/skills/drawio/agents/openai.yaml +19 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-erd.drawio +84 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-layered-cn.drawio +91 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-layered-cn.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-layered.drawio +112 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-layered.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-ml.drawio +90 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-ring-cn.drawio +68 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-ring-cn.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-ring.drawio +86 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-ring.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-sequence.drawio +116 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-star-cn.drawio +66 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-star-cn.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-star.drawio +79 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-star.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/demo-uml-class.drawio +64 -0
yycode-0.3.2.data/data/skills/drawio/assets/microservices-example.drawio +173 -0
yycode-0.3.2.data/data/skills/drawio/assets/microservices-example.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/workflow-cn.drawio +120 -0
yycode-0.3.2.data/data/skills/drawio/assets/workflow-cn.png +0 -0
yycode-0.3.2.data/data/skills/drawio/assets/workflow.drawio +120 -0
yycode-0.3.2.data/data/skills/drawio/assets/workflow.png +0 -0
yycode-0.3.2.data/data/skills/drawio/docs/index.html +469 -0
yycode-0.3.2.data/data/skills/drawio/docs/zh.html +456 -0
yycode-0.3.2.data/data/skills/drawio/references/style-extraction.md +254 -0
yycode-0.3.2.data/data/skills/drawio/styles/schema.json +112 -0
yycode-0.3.2.data/data/skills/plan.md +115 -0
yycode-0.3.2.data/data/skills/ppt/SKILL.md +254 -0
yycode-0.3.2.dist-info/METADATA +12 -0
yycode-0.3.2.dist-info/RECORD +131 -0
yycode-0.3.2.dist-info/WHEEL +5 -0
yycode-0.3.2.dist-info/entry_points.txt +2 -0
yycode-0.3.2.dist-info/top_level.txt +4 -0

yycode-0.3.2.data/data/skills/drawio/docs/index.html ADDED Viewed

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>drawio-skill — From Text to Professional Diagrams</title>
+  <meta name="description" content="Claude Code skill for generating professional draw.io diagrams from natural language. 6 diagram presets, ML/DL support, self-check loop, animated connectors.">
+  <meta name="theme-color" content="#0d1117">
+  <link rel="canonical" href="https://agents365-ai.github.io/drawio-skill/">
+  <link rel="alternate" hreflang="zh" href="https://agents365-ai.github.io/drawio-skill/zh.html">
+  <link rel="alternate" hreflang="en" href="https://agents365-ai.github.io/drawio-skill/">
+  <meta property="og:title" content="drawio-skill — From Text to Professional Diagrams">
+  <meta property="og:description" content="Claude Code skill for generating professional draw.io diagrams from natural language. 6 diagram presets, ML/DL support, self-check loop.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://agents365-ai.github.io/drawio-skill/">
+  <meta property="og:image" content="https://raw.githubusercontent.com/Agents365-ai/drawio-skill/main/assets/demo-star.png">
+  <meta name="twitter:card" content="summary_large_image">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    /* Theme variables */
+    [data-theme="dark"] {
+      --bg: #0d1117; --bg-card: #161b22; --bg-code: #1c2128;
+      --border: #30363d; --text: #e6edf3; --text-muted: #8b949e;
+      --accent: #58a6ff; --accent-hover: #79c0ff;
+      --green: #3fb950; --red: #f85149;
+    }
+    [data-theme="light"] {
+      --bg: #ffffff; --bg-card: #f6f8fa; --bg-code: #f0f3f6;
+      --border: #d0d7de; --text: #1f2328; --text-muted: #656d76;
+      --accent: #0969da; --accent-hover: #0550ae;
+      --green: #1a7f37; --red: #cf222e;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden;
+      transition: background 0.3s, color 0.3s;
+    }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { color: var(--accent-hover); text-decoration: underline; }
+    /* Nav */
+    nav {
+      position: sticky; top: 0; z-index: 100;
+      background: var(--bg); border-bottom: 1px solid var(--border);
+      padding: 12px 24px; display: flex; justify-content: space-between; align-items: center;
+      transition: background 0.3s;
+    }
+    nav .logo { font-weight: 700; font-size: 16px; color: var(--text); }
+    nav .logo span { color: var(--accent); }
+    nav .nav-right { display: flex; align-items: center; gap: 16px; }
+    .lang-switch {
+      font-size: 14px; font-weight: 500; color: var(--text-muted);
+      padding: 4px 12px; border: 1px solid var(--border); border-radius: 6px;
+      transition: all 0.2s;
+    }
+    .lang-switch:hover { color: var(--text); border-color: var(--text-muted); text-decoration: none; }
+    .theme-btn {
+      background: none; border: 1px solid var(--border); color: var(--text-muted);
+      border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 16px;
+      transition: all 0.2s; line-height: 1;
+    }
+    .theme-btn:hover { color: var(--text); border-color: var(--text-muted); }
+    /* Layout */
+    .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
+    section { padding: 72px 0; }
+    section + section { border-top: 1px solid var(--border); }
+    /* Hero */
+    .hero { text-align: center; padding: 96px 0 72px; border-bottom: 1px solid var(--border); }
+    .hero-badge {
+      display: inline-block; font-size: 13px; color: var(--accent);
+      border: 1px solid var(--accent); border-radius: 20px;
+      padding: 4px 14px; margin-bottom: 20px; letter-spacing: 0.5px;
+    }
+    .hero h1 { font-size: 48px; font-weight: 800; margin-bottom: 16px; letter-spacing: -1px; }
+    .hero h1 span { color: var(--accent); }
+    .hero p { font-size: 20px; color: var(--text-muted); max-width: 600px; margin: 0 auto 32px; }
+    .hero-install {
+      display: inline-flex; align-items: center; gap: 12px;
+      background: var(--bg-code); border: 1px solid var(--border); border-radius: 8px;
+      padding: 12px 20px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 15px;
+      margin-bottom: 24px;
+    }
+    .hero-install code { color: var(--green); }
+    .copy-btn {
+      background: none; border: 1px solid var(--border); color: var(--text-muted);
+      border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 13px; transition: all 0.2s;
+    }
+    .copy-btn:hover { color: var(--text); border-color: var(--text-muted); }
+    .hero-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
+    .btn {
+      display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px;
+      border-radius: 8px; font-size: 15px; font-weight: 600; transition: all 0.2s;
+    }
+    .btn-primary { background: var(--accent); color: #fff; }
+    [data-theme="light"] .btn-primary { color: #fff; }
+    .btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
+    .btn-outline { border: 1px solid var(--border); color: var(--text); }
+    .btn-outline:hover { border-color: var(--text-muted); text-decoration: none; }
+    /* Section headers */
+    .section-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; text-align: center; }
+    .section-sub { color: var(--text-muted); font-size: 17px; text-align: center; margin-bottom: 48px; }
+    /* Feature cards */
+    .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
+    .feature-card {
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 12px; padding: 28px; transition: background 0.3s;
+    }
+    .feature-icon { font-size: 28px; margin-bottom: 12px; }
+    .feature-card h3 { font-size: 18px; margin-bottom: 8px; }
+    .feature-card p { color: var(--text-muted); font-size: 14px; }
+    /* Demo gallery */
+    .demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
+    .demo-item { text-align: center; }
+    .demo-item img { width: 100%; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
+    .demo-item h4 { font-size: 16px; margin-bottom: 4px; }
+    .demo-item p { color: var(--text-muted); font-size: 13px; }
+    /* Comparison table */
+    .compare-table { width: 100%; border-collapse: collapse; font-size: 15px; }
+    .compare-table th, .compare-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
+    .compare-table th { color: var(--text-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
+    .compare-table tr:hover { background: var(--bg-card); }
+    .check { color: var(--green); font-weight: 700; }
+    .cross { color: var(--red); }
+    /* Install tabs */
+    .tabs { display: flex; gap: 0; margin-bottom: 0; flex-wrap: wrap; }
+    .tab {
+      padding: 10px 20px; background: var(--bg-card); border: 1px solid var(--border);
+      border-bottom: none; color: var(--text-muted); cursor: pointer;
+      font-size: 14px; font-weight: 500; transition: all 0.2s;
+    }
+    .tab:first-child { border-radius: 8px 0 0 0; }
+    .tab:last-child { border-radius: 0 8px 0 0; }
+    button.tab { font-family: inherit; }
+    .tab.active { background: var(--bg-code); color: var(--text); border-bottom-color: var(--bg-code); }
+    .tab-content {
+      display: none; background: var(--bg-code); border: 1px solid var(--border);
+      border-radius: 0 8px 8px 8px; padding: 20px;
+    }
+    .tab-content.active { display: block; }
+    .tab-content pre {
+      font-family: 'SF Mono', 'Fira Code', monospace; font-size: 14px;
+      line-height: 1.5; white-space: pre-wrap; color: var(--green);
+    }
+    /* Support */
+    .support-grid {
+      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      gap: 20px; max-width: 820px; margin: 0 auto 40px;
+    }
+    .support-card {
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: 12px; padding: 20px;
+      display: flex; flex-direction: column; align-items: center; text-align: center;
+      transition: background 0.3s;
+    }
+    .support-card img {
+      width: 160px; height: 160px; object-fit: contain;
+      border-radius: 8px; margin-bottom: 12px; background: #fff;
+    }
+    .support-card b { font-size: 14px; color: var(--text); }
+    .author-block {
+      text-align: center; padding-top: 32px; margin-top: 16px;
+      border-top: 1px solid var(--border);
+    }
+    .author-block h3 { font-size: 18px; margin-bottom: 8px; font-weight: 700; }
+    .author-block p { color: var(--text-muted); margin-bottom: 12px; }
+    .author-links { display: inline-flex; gap: 24px; font-size: 14px; }
+    /* Footer */
+    footer {
+      border-top: 1px solid var(--border); padding: 32px 0;
+      text-align: center; color: var(--text-muted); font-size: 14px;
+    }
+    footer a { color: var(--text-muted); }
+    footer a:hover { color: var(--text); }
+    /* Responsive */
+    @media (max-width: 640px) {
+      .hero h1 { font-size: 32px; }
+      .hero p { font-size: 17px; }
+      section { padding: 48px 0; }
+      .features-grid { grid-template-columns: 1fr; }
+      .hero-install { flex-direction: column; font-size: 13px; }
+    }
+    .skip-link {
+      position: absolute; top: -40px; left: 0; background: var(--accent); color: #fff;
+      padding: 8px 16px; z-index: 200; font-size: 14px; transition: top 0.2s;
+    }
+    .skip-link:focus { top: 0; }
+    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  </style>
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+  <nav role="navigation" aria-label="Main">
+    <div class="logo">drawio-<span>skill</span></div>
+    <div class="nav-right">
+      <a href="zh.html" class="lang-switch">中文</a>
+      <button class="theme-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle dark/light theme">&#x1F319;</button>
+    </div>
+  </nav>
+  <main id="main-content">
+  <!-- Hero -->
+  <div class="hero">
+    <div class="container">
+      <div class="hero-badge">v1.4.0 &mdash; Custom Output Directory</div>
+      <h1>drawio-<span>skill</span></h1>
+      <p>From text to professional diagrams. Generate draw.io files from natural language with self-check, iterative refinement, and ML model support.</p>
+      <div class="hero-install">
+        <code id="install-cmd">git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill</code>
+        <button class="copy-btn" onclick="copyInstall()">Copy</button>
+      </div>
+      <div class="hero-links">
+        <a href="https://github.com/Agents365-ai/drawio-skill" class="btn btn-primary">GitHub</a>
+        <a href="https://clawhub.ai/agents365-ai/drawio-pro-skill" class="btn btn-outline">ClawHub</a>
+        <a href="https://skillsmp.com/skills/agents365-ai-drawio-skill-skill-md" class="btn btn-outline">SkillsMP</a>
+      </div>
+    </div>
+  </div>
+  <!-- Features -->
+  <section>
+    <div class="container">
+      <h2 class="section-title">Why This Skill</h2>
+      <p class="section-sub">The only pure-SKILL.md solution that reads its own output and auto-fixes before showing you.</p>
+      <div class="features-grid">
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F4CB;</div>
+          <h3>6 Diagram Presets</h3>
+          <p>ERD, UML Class, Sequence, Architecture, ML/Deep Learning, Flowchart &mdash; each with preset shapes, styles, and layout conventions.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F9E0;</div>
+          <h3>ML / Deep Learning</h3>
+          <p>Transformer, CNN, LSTM architectures with tensor shape annotations (B, C, H, W). Built for NeurIPS, ICML, ICLR papers.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F50D;</div>
+          <h3>Self-Check Loop</h3>
+          <p>Reads the exported PNG, detects 6 issue types (overlaps, clipped labels, stacked edges), and auto-fixes before showing you.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x2728;</div>
+          <h3>Animated Connectors</h3>
+          <p>Add <code>flowAnimation=1</code> for moving dot animations along arrows. Ideal for data-flow and pipeline diagrams in SVG.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F3A8;</div>
+          <h3>Style Presets</h3>
+          <p>Teach the skill your visual style from a <code>.drawio</code> file or image. Save by name and apply to future diagrams. 3 built-ins included: <code>default</code>, <code>corporate</code>, <code>handdrawn</code>.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F310;</div>
+          <h3>6 Platforms, Zero Config</h3>
+          <p>Claude Code, Opencode, OpenClaw, Hermes, Codex, SkillsMP &mdash; just one SKILL.md file + draw.io desktop. No MCP, no Node.js.</p>
+        </div>
+        <div class="feature-card">
+          <div class="feature-icon">&#x1F4BB;</div>
+          <h3>Browser Fallback</h3>
+          <p>No desktop CLI? Generates a diagrams.net URL that opens your diagram in the browser for viewing and editing.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Demo Gallery -->
+  <section>
+    <div class="container">
+      <h2 class="section-title">Demo Gallery</h2>
+      <p class="section-sub">Clean edge routing across different topologies &mdash; no lines crossing through shapes.</p>
+      <div class="demos">
+        <div class="demo-item">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/drawio-skill/main/assets/demo-star.png" alt="Star topology diagram">
+          <h4>Star Topology</h4>
+          <p>7 nodes &mdash; central broker, 6 services radiating outward</p>
+        </div>
+        <div class="demo-item">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/drawio-skill/main/assets/demo-layered.png" alt="Layered flow diagram">
+          <h4>Layered Flow</h4>
+          <p>10 nodes, 4 tiers &mdash; with cross-connections routed cleanly</p>
+        </div>
+        <div class="demo-item">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/drawio-skill/main/assets/demo-ring.png" alt="Ring cycle diagram">
+          <h4>Ring / Cycle</h4>
+          <p>8 nodes &mdash; CI/CD pipeline with closed loop and spur branches</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Comparison -->
+  <section>
+    <div class="container">
+      <h2 class="section-title">vs Native Agent</h2>
+      <p class="section-sub">What you get with the skill vs prompting an LLM directly.</p>
+      <div class="table-wrapper">
+      <table class="compare-table">
+        <thead>
+          <tr><th>Feature</th><th>Native Agent</th><th>This Skill</th></tr>
+        </thead>
+        <tbody>
+          <tr><td>Self-check after export</td><td class="cross">&#x2717;</td><td class="check">&#x2713; 2-round auto-fix</td></tr>
+          <tr><td>Iterative review loop</td><td class="cross">&#x2717;</td><td class="check">&#x2713; 5-round with targeted edits</td></tr>
+          <tr><td>Diagram type presets</td><td class="cross">&#x2717;</td><td class="check">&#x2713; 6 presets (ERD, UML, Seq, Arch, ML, Flow)</td></tr>
+          <tr><td>ML model diagrams</td><td class="cross">&#x2717;</td><td class="check">&#x2713; Tensor shapes, layer colors</td></tr>
+          <tr><td>Animated connectors</td><td class="cross">&#x2717;</td><td class="check">&#x2713; flowAnimation=1</td></tr>
+          <tr><td>Grid-aligned layout</td><td class="cross">&#x2717;</td><td class="check">&#x2713; 10px snap</td></tr>
+          <tr><td>Complexity-scaled spacing</td><td class="cross">&#x2717;</td><td class="check">&#x2713; 200&ndash;350px by node count</td></tr>
+          <tr><td>Color palette</td><td class="cross">Random</td><td class="check">&#x2713; 7-color semantic system</td></tr>
+          <tr><td>Edge routing rules</td><td class="cross">Basic</td><td class="check">&#x2713; Corridors + waypoints + distribution</td></tr>
+          <tr><td>Container/group nesting</td><td class="cross">&#x2717;</td><td class="check">&#x2713; Swimlane + group + custom</td></tr>
+          <tr><td>Embed diagram in export</td><td class="cross">&#x2717;</td><td class="check">&#x2713; --embed-diagram</td></tr>
+          <tr><td>Browser fallback</td><td class="cross">&#x2717;</td><td class="check">&#x2713; diagrams.net URL</td></tr>
+          <tr><td>Auto-launch desktop app</td><td class="cross">&#x2717;</td><td class="check">&#x2713; Opens .drawio for fine-tuning</td></tr>
+          <tr><td>Style presets</td><td class="cross">&#x2717;</td><td class="check">&#x2713; Learn, save &amp; apply named styles</td></tr>
+        </tbody>
+      </table>
+      </div>
+    </div>
+  </section>
+  <!-- Install -->
+  <section>
+    <div class="container">
+      <h2 class="section-title">Install</h2>
+      <p class="section-sub">Pick your platform. Takes 10 seconds.</p>
+      <div class="tabs" role="tablist" aria-label="Installation platforms">
+        <button class="tab active" role="tab" aria-selected="true" aria-controls="tab-claude" onclick="switchTab(event, 'tab-claude')">Claude Code</button>
+        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-opencode" onclick="switchTab(event, 'tab-opencode')">Opencode</button>
+        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-openclaw" onclick="switchTab(event, 'tab-openclaw')">OpenClaw</button>
+        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-skillsmp" onclick="switchTab(event, 'tab-skillsmp')">SkillsMP</button>
+        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-clawhub" onclick="switchTab(event, 'tab-clawhub')">ClawHub</button>
+        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-codex" onclick="switchTab(event, 'tab-codex')">Codex</button>
+      </div>
+      <div id="tab-claude" class="tab-content active" role="tabpanel">
+        <pre># Global install (available in all projects)
+git clone https://github.com/Agents365-ai/drawio-skill.git ~/.claude/skills/drawio-skill
+# Project-level install
+git clone https://github.com/Agents365-ai/drawio-skill.git .claude/skills/drawio-skill</pre>
+      </div>
+      <div id="tab-opencode" class="tab-content" role="tabpanel">
+        <pre># Global install (Opencode-native path)
+git clone https://github.com/Agents365-ai/drawio-skill.git ~/.config/opencode/skills/drawio-skill
+# Project-level install
+git clone https://github.com/Agents365-ai/drawio-skill.git .opencode/skills/drawio-skill
+# Also auto-detected from existing Claude Code install
+# (~/.claude/skills/ and .claude/skills/ are read automatically)</pre>
+      </div>
+      <div id="tab-openclaw" class="tab-content" role="tabpanel">
+        <pre># Via ClawHub registry
+clawhub install drawio-pro-skill
+# Manual install
+git clone https://github.com/Agents365-ai/drawio-skill.git ~/.openclaw/skills/drawio-skill</pre>
+      </div>
+      <div id="tab-skillsmp" class="tab-content" role="tabpanel">
+        <pre># Via SkillsMP CLI
+skills install drawio-skill</pre>
+      </div>
+      <div id="tab-clawhub" class="tab-content" role="tabpanel">
+        <pre># Via ClawHub CLI
+clawhub install drawio-pro-skill</pre>
+      </div>
+      <div id="tab-codex" class="tab-content" role="tabpanel">
+        <pre># User-level install
+git clone https://github.com/Agents365-ai/drawio-skill.git ~/.agents/skills/drawio-skill
+# Project-level install
+git clone https://github.com/Agents365-ai/drawio-skill.git .agents/skills/drawio-skill</pre>
+      </div>
+    </div>
+  </section>
+  <!-- Support & Author -->
+  <section id="support">
+    <div class="container">
+      <h2 class="section-title">Support</h2>
+      <p class="section-sub">If this skill helps you, consider supporting the author.</p>
+      <div class="support-grid">
+        <div class="support-card">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/wechat-pay.png" alt="WeChat Pay" loading="lazy">
+          <b>WeChat Pay</b>
+        </div>
+        <div class="support-card">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/alipay.png" alt="Alipay" loading="lazy">
+          <b>Alipay</b>
+        </div>
+        <div class="support-card">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/qrcode/buymeacoffee.png" alt="Buy Me a Coffee" loading="lazy">
+          <b>Buy Me a Coffee</b>
+        </div>
+        <div class="support-card">
+          <img src="https://raw.githubusercontent.com/Agents365-ai/images_payment/main/awarding/award.gif" alt="Give a Reward" loading="lazy">
+          <b>Give a Reward</b>
+        </div>
+      </div>
+      <div class="author-block">
+        <h3>Author</h3>
+        <p><strong>Agents365-ai</strong></p>
+        <div class="author-links">
+          <a href="https://github.com/Agents365-ai">GitHub</a>
+          <a href="https://space.bilibili.com/441831884">Bilibili</a>
+        </div>
+      </div>
+    </div>
+  </section>
+  </main>
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <p>
+        MIT License &middot;
+        <a href="https://github.com/Agents365-ai/drawio-skill">GitHub</a> &middot;
+        <a href="https://github.com/Agents365-ai">Agents365-ai</a>
+      </p>
+    </div>
+  </footer>
+  <script>
+    function copyInstall() {
+      const cmd = document.getElementById('install-cmd').textContent;
+      navigator.clipboard.writeText(cmd).then(() => {
+        const btn = document.querySelector('.copy-btn');
+        btn.textContent = 'Copied!';
+        setTimeout(() => btn.textContent = 'Copy', 2000);
+      });
+    }
+    function switchTab(e, id) {
+      document.querySelectorAll('.tab').forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
+      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+      e.target.classList.add('active');
+      e.target.setAttribute('aria-selected', 'true');
+      document.getElementById(id).classList.add('active');
+    }
+    function toggleTheme() {
+      const html = document.documentElement;
+      const current = html.getAttribute('data-theme');
+      const next = current === 'dark' ? 'light' : 'dark';
+      html.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      document.querySelector('.theme-btn').innerHTML = next === 'dark' ? '&#x1F319;' : '&#x2600;&#xFE0F;';
+    }
+    // Restore saved theme
+    (function() {
+      const saved = localStorage.getItem('theme');
+      if (saved) {
+        document.documentElement.setAttribute('data-theme', saved);
+        document.querySelector('.theme-btn').innerHTML = saved === 'dark' ? '&#x1F319;' : '&#x2600;&#xFE0F;';
+      }
+    })();
+  </script>
+</body>
+</html>