skills.rest
jay-steenbergen
jay-steenbergenCOMMUNITY
Explore all skills by this author →
GitHub

wbd-drawio-for-polished-diagrams

Builds polished cloud architecture diagrams in Draw.io with provider icons, layers, and exports.

2|Updated Jun 1, 2026
Search Tags:#azure#architecture diagrams#svg export#drawio#whiteboarding#diagrams.net#aws icons
One-click install
npx skills add https://github.com/jay-steenbergen/MSSAMentorAgent --skill wbd-drawio-for-polished-diagrams-jay-steenbergen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wbd-drawio-for-polished-diagrams
Source: https://github.com/jay-steenbergen/MSSAMentorAgent/tree/main/.github/skills/tracks/whiteboarding/wbd-drawio-for-polished-diagrams
Command: npx skills add https://github.com/jay-steenbergen/MSSAMentorAgent --skill wbd-drawio-for-polished-diagrams-jay-steenbergen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mermaid diagrams work for engineering READMEs but lack official cloud iconography and polish needed for executive decks, customer-facing architecture documents, and compliance materials. This Skill teaches learners to produce presentation-quality AWS and Azure diagrams in Draw.io and to choose the right diagramming tool for each audience. ## Core Features & Use Cases - Draw.io Setup and Shape Libraries: Install the VS Code extension or web app, enable AWS, Azure, and GCP shape libraries, and place official cloud icons. - Two Guided Diagram Builds: Create an AWS 3-tier web app diagram and an Azure event-driven pipeline with Data Flow, Network, and Security layers. - Export and Tool Selection: Export to PNG, SVG, PDF, or editable .drawio.svg, and apply a decision tree for choosing Mermaid, Draw.io, or a whiteboard. - Use Case: A learner preparing a customer-facing architecture review builds a polished Azure pipeline diagram with layered security callouts, exports it as a PDF, and commits the editable source to git. ## Quick Start Ask the Mentor to start the Draw.io polished diagrams project and walk you through building an AWS 3-tier architecture diagram step by step.

Frequently Asked Questions about wbd-drawio-for-polished-diagrams

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create AWS architecture diagrams in Draw.io?▼

Open the More Shapes menu in Draw.io, enable the AWS17 networking library, then search and drag official icons like Lambda, S3, and EC2 onto the canvas. Connect shapes with edge arrows, group tiers in containers, and save as a .drawio XML file.

Draw.io vs Mermaid: which should I use for architecture diagrams?▼

Use Draw.io for executive decks, customer documents, and diagrams needing official cloud icons or PDF export. Use Mermaid for README files and engineering docs where diagrams must render inline and stay diff-friendly in pull requests.

Can I use Draw.io inside VS Code?▼

Yes, install the Draw.io Integration extension by Henning Dieterichs, then create a file with the .drawio extension. The diagram editor opens inside VS Code and the file saves as XML you can commit to git alongside your code.

How do layers work in Draw.io diagrams?▼

Open the layers panel and create separate layers such as Data Flow, Network, and Security, then assign shapes to each layer. Toggling layer visibility lets one source file serve architecture, network, and security reviews without maintaining separate diagrams.

What export format should I use for Draw.io diagrams?▼

Use PNG for slides and README embeds, SVG for web pages needing infinite scaling, and PDF for print or formal documents. The .drawio.svg format renders inline on GitHub while remaining editable in Draw.io, making it ideal for git repositories.

Related Skills

Explore More Education & Research Skills→
openclawopenclaw
388.4k

diagram-maker

Generate SVG, HTML, or Excalidraw diagrams for concepts, architecture, and workflows.

Official
Intermediate
noufal85noufal85

interview-culture-memo

Runs a 45-minute Netflix culture-memo mock interview with per-question critical feedback.

Community
Advanced
matiaspakuamatiaspakua

drawio

Generate native draw.io diagrams from natural language prompts.

Community
Advanced
cassm199-mitacassm199-mita

excalidraw

Generate hand-drawn style diagrams and sketches in Excalidraw JSON format.

Community
Basic