A GitHub Copilot agent skill that writes BTP solution diagrams as uncompressed draw.iodraw.ioA diagram editor, on the web and as a desktop app. The BTP diagram skills here write .drawio files, and a person opens and edits them in it. XML against the SAP BTP Solution Diagram Design GuidelineSAP BTP Solution Diagram GuidelinesSAP's visual language for BTP solution diagrams, in line with the SAP Fiori Horizon principles and colour palette, with editable templates for draw.io and PowerPoint.sap official, btp, with SAP's own shape library bundled.
Generates .drawio files at one of three levels of detail, L0 for business stakeholders, L1 for architects and L2 for implementation teams, and asks once which is wanted, defaulting to L1. The bundled references/drawio-sap-config.json is the SAP Corporate and SAP BTP shape library exported from draw.io, and hand-written icon styles are refused: every persona and every SAP system, service or product has to render as a real icon or product logo looked up through scripts/sap_shapesearch.py, because mxgraph.sap.icon renders as empty boxes. After generating the XML it exports a draft PNG, checks it against the colour, nesting, overlap and connector rules, edits the XML where the check fails and exports again, with validate.py --strict --score linting the structure deterministically. It creates and validates files without draw.io desktop, which is needed only for PNG, SVG, PDF or JPG export, and the vision self-check is skipped where no vision-capable model is available. Python 3 and its standard library are what the scripts need. Installed by placing the skill folder where a Copilot environment reads Agent Skills, .github/skills/drawio-skill-sap in the repository it is to be used in, or through the skills command line.
Written for an Agent Skills location a Copilot environment recognises, and it states the icon rule as a prohibition: every persona and every SAP system, service or product has to render as a real SAP icon or product logo.
Place the skill folder where the Copilot environment reads it, or install it through the skills command line. The vision self-check in its routine is skipped where no vision-capable model is available.
Packaged knowledge that teaches a coding agent a framework
Drawing a solution's architecture and components
A diagram editor, on the web and as a desktop app. The BTP diagram skills here write .drawio files, and a person opens and edits them in it.
npx skills add lofonD/SAP-BTP-Architecture-Diagram-Generator --skill drawio-skill-sapCopied from lofonD/SAP-BTP-Architecture-Diagram-Generator — README, Quick Start, read . Not run by the atlas.
A GitHub Copilot agent skill that generates production-quality SAP Business Technology Platform (BTP) solution diagrams following the official SAP BTP Solution Diagram Design Guideline (Horizon theme).
Skill ID:
drawio-skill-sap· Version: 1.0.3 Homepage: lofonD/SAP-BTP-Architecture-Diagram-Generator
.drawio files@drawio/mcp serverThe skill can create and validate .drawio files without draw.io desktop. The desktop app is required only for image or PDF export.
Clone this repository and place skills/drawio-skill-sap in an Agent Skills location recognized by your Copilot environment, such as .github/skills/drawio-skill-sap in the repository where you want to use it.
git clone https://github.com/lofonD/SAP-BTP-Architecture-Diagram-Generator.gitInstall via Skills CLI
npx skills add lofonD/SAP-BTP-Architecture-Diagram-Generator --skill drawio-skill-sapOpen Chat in Agent mode and ask for a diagram:
/drawio-skill-sap Create an L1 BTP diagram for SAP Build Work Zone,
Integration Suite, SAP S/4HANA Cloud, and SAP SuccessFactors.
You can also use a natural-language request:
Create an L2 SAP BTP architecture diagram showing Integration Suite
connecting to SAP S/4HANA Cloud through Cloud Connector, with SAP Cloud
Identity Services handling authentication.
If no level is specified, the skill asks once and defaults to L1.
Diagram generated:
Python 3 is required for the bundled scripts; they use only the standard library.
python skills/drawio-skill-sap/scripts/validate.py diagram.drawio --strict --scoreStrict validation returns a nonzero exit code for errors or warnings, making it suitable for CI.
Install draw.io desktop, then export with its CLI:
# Windows: high-DPI PNG with editable diagram XML embedded
& "C:\Program Files\draw.io\draw.io.exe" -x -f png -e -s 2 -o diagram.png diagram.drawio# macOS / Linux
drawio -x -f png -e -s 2 -o diagram.png diagram.drawioUse -f svg, -f pdf, or -f jpg for another output format. The -e flag embeds the source diagram in supported exports so it can be reopened in draw.io.
| Level | Audience | Typical content |
|---|---|---|
| L0 | Business stakeholders | Platform boundaries, core systems, and simple flows |
| L1 | Architects and solution owners | Subaccounts, major services, integrations, and selected semantic flows |
| L2 | Implementation teams | Runtimes, services, trust and authentication paths, protocols, and a full legend |
The skill applies SAP's atomic design approach rather than treating the diagram as a collection of generic boxes:
| Purpose | Border / line | Fill |
|---|---|---|
| SAP/BTP area | #0070F2 | #EBF8FF |
| Non-SAP or external area | #475E75 | #F5F6F7 |
| Authentication | #188918 | #F5FAE5 |
| Authorization | #5D36FF | #F1ECFF |
| Trust | #CB00DC | #FFF0FA |
| Warning | #C35500 | #FFF8D6 |
| Error | #D20A0A | #FFEAF4 |
| Highlight | #07838F | #DAFDF5 |
| Style | Meaning |
|---|---|
| Solid | Direct or synchronous flow |
| Dashed | Indirect or asynchronous flow |
| Dotted | Optional flow |
| Thick grey, no arrow | Firewall or network barrier |
For the complete generation rules, see skills/drawio-skill-sap/SKILL.md.
Run these commands from the repository root.
python skills/drawio-skill-sap/scripts/sap_shapesearch.py "integration suite"
python skills/drawio-skill-sap/scripts/sap_shapesearch.py "cloud identity" --format json
python skills/drawio-skill-sap/scripts/sap_shapesearch.py --list-categoriesThe search returns exact styles from the bundled SAP shape library. shapesearch.py provides a generic draw.io fallback when no SAP shape matches.
sap_build.py turns a compact JSON specification into uncompressed .drawio XML and resolves SAP icons by name:
python skills/drawio-skill-sap/scripts/sap_build.py spec.json -o diagram.drawio
python skills/drawio-skill-sap/scripts/sap_build.py --find "cloud integration"See the script's module documentation for the supported node types, edge kinds, and specification format.
python skills/drawio-skill-sap/scripts/validate.py diagram.drawio --strict --score
python skills/drawio-skill-sap/scripts/validate.py diagram.drawio --format jsonGenerate a diagrams.net URL from a local file:
python skills/drawio-skill-sap/scripts/encode_drawio_url.py diagram.drawioThe optional .vscode/mcp.json configuration starts the official draw.io MCP server with npx -y @drawio/mcp. It can open XML in the browser, but SAP shape lookup still belongs to sap_shapesearch.py, and file export still requires draw.io desktop.
skills/drawio-skill-sap/
|-- SKILL.md # Agent instructions and design rules
|-- references/
| |-- drawio-sap-config.json # Bundled SAP shape library
| |-- *.drawio # Official reference patterns
| `-- troubleshooting.md
`-- scripts/
|-- sap_build.py # JSON spec to .drawio builder
|-- sap_shapesearch.py # SAP shape lookup
|-- shapesearch.py # Generic draw.io shape lookup
|-- validate.py # Structural linter
|-- encode_drawio_url.py # Browser-preview URL generator
`-- repair_png.py # Repair truncated PNG IEND chunks
Bundled examples cover SAP Task Center at L0/L1/L2, SAP Start, SAP Build Work Zone, SAP Cloud Identity Services, SAP Private Link Service, and a broader BTP reference architecture.
For common XML, icon, layout, routing, and export issues, see skills/drawio-skill-sap/references/troubleshooting.md.
See LICENSE if present. SAP shape assets are subject to SAP's IP and usage terms.
Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.
artifact:lofond-drawio-skill-sap