# Paulanunes85 Super Powers HTML Diagrams
> HTML Interactive Diagrams
- Skill: `tomevault-io/paulanunes85-super-powers-html-diagrams` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/paulanunes85-super-powers-html-diagrams`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/paulanunes85-super-powers-html-diagrams/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/paulanunes85-super-powers-html-diagrams
---
# HTML Interactive Diagrams
Create professional, interactive HTML diagrams using React (via CDN) embedded in a single self-contained HTML file. Every diagram uses Microsoft branding, includes a language selector, and is educational/didactic by design.
## Architecture: Single-File HTML
Every diagram is **one `.html` file** with:
- React 18 via CDN (no build step, no Node.js required)
- All CSS inline (no external stylesheets)
- All JavaScript inline (no external scripts beyond CDN)
- Open directly in any browser — no server needed
## HTML Template (MANDATORY)
Every generated HTML file MUST follow this exact structure:
```html
{{diagram_title}} — {{client_name}}
```
## Microsoft Brand Palette
| Color | Hex | CSS Variable | Use For |
|-------|-----|-------------|---------|
| **Red** | `#F25022` | `--ms-red` | Security, Critical, Blocked |
| **Green** | `#7FBA00` | `--ms-green` | Success, Testing, Approved |
| **Blue** | `#00A4EF` | `--ms-blue` | Data, Integration, Cloud |
| **Yellow** | `#FFB900` | `--ms-yellow` | Planning, Warnings, Events |
| **Primary Blue** | `#0078D4` | `--ms-primary` | Headers, CTAs, Primary actions |
| **Dark Green** | `#107C10` | `--ms-dark-green` | Confirmed, Healthy |
| **Purple** | `#5C2D91` | `--ms-purple` | AI/Agents, Modernization |
| **Orange** | `#D83B01` | `--ms-orange` | Human actions, Manual steps |
| **Teal** | `#008272` | `--ms-teal` | Monitoring, Infrastructure |
### Neutral Colors
| Element | Hex | Use |
|---------|-----|-----|
| Text primary | `#323130` | Body text |
| Text secondary | `#605E5C` | Metadata, captions |
| Background | `#F9F9F9` | Page background |
| Card background | `#FFFFFF` | Nodes, panels |
| Border | `#E1DFDD` | Card borders |
| Border subtle | `#D2D0CE` | Dividers |
### Header 4-Color Bar
Always include the Microsoft 4-color gradient bar under the header:
```css
border-image: linear-gradient(to right, #F25022 25%, #7FBA00 25%, #7FBA00 50%, #00A4EF 50%, #00A4EF 75%, #FFB900 75%) 1;
```
## Language Selector (MANDATORY)
Every HTML diagram MUST include a language selector in the header with exactly these 3 options:
```jsx
```
### Translation Structure
Use a `translations` object with all user-facing strings:
```javascript
const translations = {
en: {
title: "System Architecture",
subtitle: "Overview of the deployment topology",
legend: "Legend",
details: "Details",
clickToExplore: "Click a node to explore",
// ... all labels, descriptions, annotations
},
'pt-br': {
title: "Arquitetura do Sistema",
subtitle: "Visão geral da topologia de implantação",
legend: "Legenda",
details: "Detalhes",
clickToExplore: "Clique em um nó para explorar",
},
es: {
title: "Arquitectura del Sistema",
subtitle: "Visión general de la topología de despliegue",
legend: "Leyenda",
details: "Detalles",
clickToExplore: "Haga clic en un nodo para explorar",
}
};
```
**Rules:**
- Default language: `en` (English)
- All node labels, descriptions, tooltips, and annotations must be translated
- Technical terms (API, MCP, Docker, Kubernetes) stay in English across all languages
- The language selector persists in the header — always visible
## Metadata (MANDATORY)
Every diagram MUST display in the header and footer:
| Field | Source | Example |
|-------|--------|---------|
| **Client name** | `{{client_name}}` | "Microsoft" |
| **Project name** | `{{project_name}}` | "Three Horizons" |
| **Version** | `{{version}}` | "1.0.0" |
| **Date** | `{{date}}` | "2026-03-04" |
Use semantic versioning for the `version` field.
## Versioning & Archiving
- Filename pattern: `{Title}_v{version}_{YYYY-MM-DD}.html`
- Save to: `output/html/`
- Before overwriting an existing file, move the previous version to `output/html/archive/`
- The version, date, and author/client info are embedded in the header and footer of the HTML itself
## Interactive Features
### Click-to-Explore Nodes
Every node must be clickable. On click, show a detail panel below the diagram with:
- Node name and description (translated)
- Technical details
- Related nodes / connections
- Educational annotation explaining why this component exists
```jsx
function Node({ id, label, color, x, y, onClick, isActive }) {
return (
onClick(id)}
>
{label}
);
}
```
### Educational Annotations
Use colored annotation boxes to add didactic context:
```jsx
💡 This component handles authentication using OAuth 2.0 with Azure AD,
ensuring zero-trust access from the edge to the backend.
⚠️ This service is a single point of failure. Consider adding a standby
replica in a secondary region for production workloads.
```
| Type | CSS Class | Border Color | Use For |
|------|-----------|-------------|---------|
| Info | `annotation info` | `#0078D4` | Explanations, how it works |
| Success | `annotation success` | `#107C10` | Best practices, confirmed patterns |
| Warning | `annotation warning` | `#FFB900` | Caveats, considerations |
| Critical | `annotation critical` | `#E81123` | Risks, security concerns |
### SVG Connections (Arrows)
For connecting nodes, use SVG lines overlaid on the canvas:
```jsx
function Connection({ from, to, label, color = '#605E5C' }) {
return (
);
}
```
## Diagram Types
| Type | Layout | Use Case |
|------|--------|----------|
| **Architecture** | Layered (top-to-bottom) | System components, tiers, services |
| **Flow** | Left-to-right | Process steps, pipelines, CI/CD |
| **Agent Workflow** | Left-to-right with lanes | AI agent handoffs, automation |
| **Deployment** | Layered with groups | Infrastructure, cloud topology |
| **Data Flow** | Left-to-right | Data pipelines, ETL, event streams |
| **Network** | Free-form | Network topology, connectivity |
### Layout Guidelines
- **Spacing:** 200px horizontal gap, 120px vertical gap between nodes
- **Grouping:** Use visual containers (dashed borders) for logical groups
- **Direction:** Read left-to-right for flows, top-to-bottom for hierarchies
- **Alignment:** Align nodes to an invisible grid
## Factual Integrity
- NEVER fabricate metrics, KPIs, or technical specifications in annotations
- Only reference technologies that actually exist in the system being diagrammed
- Annotation educational content must be technically accurate
- If adding architectural recommendations, cite credible sources (Microsoft Learn, Azure Architecture Center, AWS Well-Architected)
## Quality Checklist
- [ ] Single self-contained HTML file (no external dependencies beyond CDN)
- [ ] React 18 via CDN loads correctly
- [ ] Language selector in header with EN, PT-BR, ES options
- [ ] All user-facing text translated in all 3 languages
- [ ] Header shows client name, project name, version, date
- [ ] Footer shows same metadata + "Confidential"
- [ ] Microsoft 4-color bar under header
- [ ] Segoe UI font throughout
- [ ] Microsoft brand colors only (no arbitrary colors)
- [ ] All nodes are clickable with detail panel
- [ ] Educational annotations explain key concepts
- [ ] SVG arrows connect related nodes
- [ ] Hover effects on nodes (shadow + lift)
- [ ] Responsive layout (works on 1024px+)
- [ ] No fabricated technical claims in annotations
- [ ] Opens correctly in Chrome, Edge, Safari, Firefox
- [ ] Filename follows `{Title}_v{version}_{date}.html` pattern
- [ ] Saved to `output/html/` with previous version archived
---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/paulanunes85) — claim your Tome and manage your conversions.