architecture-html-dashboard
分类: 开发与编程 | 上传者: 
Generates a self-contained, interactive HTML dashboard for Power Platform and Copilot Studio architecture documentation. Features Mermaid diagrams, dark theme, responsive layout, clickable stat cards with slide-in detail drawers, and tabbed content. --- # Skill: Architecture HTML Dashboard Template > Generates a self-contained, interactive HTML dashboard for Power Platform and Copilot Studio architecture documentation. Features Mermaid diagrams, dark theme, responsive layout, clickable stat cards with slide-in detail drawers, and tabbed content. --- ## When to Use This Skill Use this skill when generating an architecture analysis as a **single self-contained HTML file**. The template provides: - Dark-themed responsive dashboard (mobile, tablet, desktop, print) - Hero section with solution name, badge, and description - Clickable stat cards → slide-in modal drawers with expandable detail cards - Five tabbed content panels: Architecture, ERD, Data Flows, Components, Notes - Mermaid v11+ diagrams with proper hidden-tab rendering - Zoom controls for diagrams - Full print stylesheet --- ## Critical Rendering Rules ### Mermaid in Hidden Tabs **Mermaid cannot render into `display: none` containers.** Follow this exact sequence: 1. All `.tab-content` elements start **visible** (no `display: none` on page load) 2. Initialize Mermaid with `startOnLoad: false` 3. Call `mermaid.run()` explicitly 4. In the `.then()` callback, call `switchTab('arch')` to hide inactive tabs 5. Tab CSS uses `.tab-content.hidden { display: none; }` — the `hidden` class is only added AFTER Mermaid renders ```html <!-- CSS: Tabs start visible, hidden class added by JS after render --> .tab-content { animation: fadeIn 0.3s ease; } .tab-content.hidden { display: none; } .tab-content.active { display: block; } ``` ```javascript // Initialize without auto-start mermaid.initialize({ startOnLoad: false, theme: 'dark', /* ... */ }); // Render all diagrams while visible, THEN hide inactive tabs mermaid.run().
更新日志: Source: GitHub https://github.com/promptclickrun/power-agents-blueprint
还没有评论，快来第一个发言吧。