req-fn-app-system-context-diagram

Generate system context diagrams in draw.io format with Markdown documentation.

Updated May 18, 2026
One-click install
npx skills add https://github.com/ABLER-Digital-Services/ai-guild --skill req-fn-app-system-context-diagram
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: req-fn-app-system-context-diagram
Source: https://github.com/ABLER-Digital-Services/ai-guild/tree/main/skills/req-fn-app-system-context-diagram
Command: npx skills add https://github.com/ABLER-Digital-Services/ai-guild --skill req-fn-app-system-context-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the problem of turning unclear system relationships into a consistent, reviewable system context diagram that shows external interfaces and data flows.

Core Features & Use Cases

  • draw.io XML generation: Uses the draw.io MCP to produce a system context diagram from a predefined template while substituting real system names, sub-functions, and arrow labels.
  • Standardized diagram conventions: Applies layout and color rules (central blue “target system”, gray external systems) to make diagrams comparable and easy to review.
  • Markdown wrapper creation: Creates a companion Markdown file that links to the generated draw.io file and includes scoped notes and check-ready content.

Quick Start

Ask an AI to create the system context diagram for your target system and include external systems, interface directions (send/receive), and data-type labels using the Skill’s draw.io template and Markdown wrapper.

Frequently Asked Questions about req-fn-app-system-context-diagram

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

FAQPage Schema
How do I generate a system context diagram with draw.io from existing requirements?

The Skill generates a system context diagram by using the draw.io MCP to map your requirements into an XML template, substituting real system names and data flows to produce a standardized visual artifact.

What is the standard layout for a system context diagram showing external interfaces?

A standard system context diagram uses a central blue target system block surrounded by gray external systems, with labeled arrows representing interface directions and data flows to ensure visual consistency.

How do I document system boundaries and data flows in Markdown?

You document system boundaries in Markdown by creating a companion wrapper file that links to the draw.io diagram, recording scoped notes and review-relevant details to contextualize the visual output.

Does the draw.io MCP support automated interface mapping for external systems?

Yes, the draw.io MCP supports automated interface mapping by taking your specified external systems, interface directions, and data-type labels to generate the diagram XML directly.

Can I update an existing system boundary diagram without breaking layout conventions?

Yes, you can update an existing system boundary diagram while maintaining consistent conventions, as the Skill applies predefined layout and color rules to ensure updated external systems remain comparable.