【GitHub Copilot】awesome-copilot の Skills と Instructions で draw.io アーキテクチャ図を自動生成する 【GitHub Copilot】awesome-copilot の Skills と Instructions で draw.io アーキテクチャ図を自動生成する

Creating architecture diagrams is one of those tasks that quietly consumes engineering time. Drawing boxes, aligning arrows, and keeping the picture in sync with the actual system is tedious, and the results often go stale the moment the design changes. A recent walkthrough on Qiita demonstrates a workflow that aims to reduce that friction by using GitHub Copilot together with curated assets from the awesome-copilot collection to generate draw.io architecture diagrams automatically.

The central idea is to combine two of Copilot's customization mechanisms, Skills and Instructions, drawn from awesome-copilot. That repository is a community-maintained catalog of reusable Copilot configuration files, including custom instructions, prompt files, chat modes, and skill definitions. Rather than writing prompts from scratch each time, developers can pull in tested building blocks that nudge Copilot toward a specific output style or task. In this case, the selected assets are tuned so that Copilot produces diagram definitions instead of prose or code.

Instructions in Copilot are persistent guidance that shapes how the model responds within a repository or workspace. They typically live in files such as copilot-instructions.md or scoped instruction files, and they let teams encode conventions, preferred terminology, and constraints. Skills are a more recent extension of this customization surface, packaging targeted capabilities that Copilot can invoke for particular jobs. Used together, the Instructions establish the rules of the road, while the Skill provides the focused ability to translate a described system into a structured diagram artifact.

The technical detail that makes this practical is the file format behind draw.io, also known as diagrams.net. A .drawio file is fundamentally XML, describing shapes, their coordinates, labels, and the connections between them. Because that structure is text-based and well documented, a large language model can generate it directly. The workflow described has Copilot emit the diagram XML from a natural-language description of an architecture, after which the file can be opened and edited in the draw.io editor or its Visual Studio Code extension. Keeping the source as text also means the diagram can live in version control alongside the code it represents, making changes reviewable in pull requests.

This approach fits a broader pattern often called diagrams as code, where visual artifacts are generated from textual definitions rather than drawn by hand. Tools like Mermaid, PlantUML, and the Python-based Diagrams library have popularized the concept, and many of them integrate with Markdown renderers and documentation pipelines. Generating draw.io XML through Copilot is a variation on that theme, with the advantage that the output remains fully editable in a mature graphical tool rather than being locked into a rendering-only format. The trade-off is that draw.io XML is more verbose and less human-friendly to author manually, which is precisely why delegating it to an AI assistant appears appealing.

Context around the tooling matters here. awesome-copilot is part of a growing ecosystem of shareable Copilot customizations, and Microsoft and GitHub have steadily expanded the ways teams can tailor the assistant's behavior, from repository-level instructions to agent-style features. Skills in particular reflect a move toward more composable, task-specific extensions. Readers should note that the exact capabilities and file conventions in this area are still evolving, so the specific Skill and Instruction formats demonstrated may change as the platform matures.

Some caveats are worth keeping in mind. Generated diagrams are only as accurate as the description provided and the model's interpretation of it, so the output is likely to need human review for correctness, layout clarity, and completeness. Automated placement can produce cramped or overlapping elements that require manual tidying, and the model may omit components or misrepresent relationships in complex systems. The technique is best viewed as a way to produce a solid first draft quickly rather than a finished, authoritative diagram.

For teams evaluating this, the prerequisites are modest: an active GitHub Copilot subscription, the draw.io editor or its VS Code extension, and a willingness to experiment with the configuration files from awesome-copilot. The payoff is a faster path from a written design to a visual one, with the diagram stored as text that can evolve with the codebase. As AI assistants increasingly handle structured-output tasks, generating editable diagrams from descriptions looks like a natural and incremental extension of how developers already work.