skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

drawio-syntax-cells

Validate Draw.io XML mxCell syntax for vertices, edges, and HTML labels.

4|Updated Mar 19, 2026
Search Tags:#containers#draw.io#edge#vertex#mxcell#userobject#html-label
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package --skill drawio-syntax-cells
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: drawio-syntax-cells
Source: https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-syntax/drawio-syntax-cells
Command: npx skills add https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package --skill drawio-syntax-cells

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Draw.io diagram XML is error-prone when vertices and edges are not properly flagged, when parent references are incorrect, or when HTML in labels is not escaped. This Skill teaches and validates the correct Draw.io XML (mxCell) syntax to prevent missing renders and broken diagrams.

Core Features & Use Cases

  • Guides the creation of mxCell vertices (shapes and containers) and edges (connectors) with proper vertex/edge flags and parent references.
  • Covers UserObject wrappers for custom metadata, HTML labels with proper escaping, placeholders, groups, and container nesting for robust diagrams.
  • Real-world scenarios include programmatic diagram generation for software architecture, data models, and process flows.

Quick Start

Create a simple vertex and an edge using correct attributes and escaped HTML to ensure a valid, renderable diagram.

Frequently Asked Questions about drawio-syntax-cells

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

FAQPage Schema
How do I fix Draw.io XML syntax errors when generating diagrams programmatically?▼

Fix Draw.io XML syntax errors by ensuring correct mxCell vertex and edge flags, validating parent references for container nesting, and properly escaping HTML in labels to prevent broken diagrams.

Why does my Draw.io mxCell vertex or edge fail to render in the diagram?▼

An mxCell vertex or edge fails to render when vertex and edge attributes are not properly flagged or when parent references are incorrect. Validating these mxCell rules ensures diagrams render correctly.

How do I escape HTML in Draw.io labels to prevent missing renders?▼

Escape HTML in Draw.io labels by applying proper character encoding within the mxCell HTML-label attributes. This prevents missing renders and ensures valid, renderable diagrams when generating XML.

What is the correct way to set up container nesting and groups in Draw.io XML?▼

Set up container nesting and groups in Draw.io XML by using valid parent references within mxCell structures. Correct parent references ensure robust container nesting for complex architectures.

Can I use UserObject wrappers for custom metadata in Draw.io diagrams?▼

Yes, you can use UserObject wrappers for custom metadata in Draw.io diagrams. They allow you to attach custom properties and properly structured HTML labels to mxCell elements programmatically.

Does this approach support generating data models and process flows for software architecture?▼

Yes, this approach supports generating data models and process flows. Applying correct mxCell syntax and container nesting validates programmatic diagram generation for software architecture and workflows.

Related Skills

Explore More Software Engineering Skills→
rockycorockyco

drawio

Generate Draw.io XML diagrams for FPGA/HLS visualization tasks.

Community
Advanced
akiojinakiojin
8

drawio

Create and edit draw.io diagrams as XML with shapes, connectors, and PNG export.

Community
Intermediate
pczhao1210pczhao1210

pptx

Extract, create, edit, and QA PowerPoint .pptx files programmatically.

Community
Advanced
linehaul-ailinehaul-ai
4

svelte-flow

Build node-based editors and interactive flow visualizations with Svelte Flow.

Official
Intermediate