Can I show live data inside diagram labels?

Yes, by setting 'placeholders=1' in the style and using the %property_name% syntax within the label text.

How do I update a diagram from an external API?

This skill includes a Python script template that fetches JSON data and programmatically modifies the diagram's XML properties based on service IDs.

Does this support automatic color changes based on thresholds?

Absolutely. You can define rules to map numeric values or status strings (like 'healthy' or 'critical') to specific fill and stroke colors.

How do I attach data to a draw.io element?

Use the tag wrapper around an mxCell to store key-value pairs like status, ID, or latency, which can then be used for formatting.

Draw.io Conditional Formatting

Name: Draw.io Conditional Formatting
Author: markus41

bymarkus41

•

Analytics & Monitoring

Transforms static draw.io diagrams into data-driven visualizations with conditional styling and dynamic placeholders.

This skill empowers Claude to design and maintain interactive draw.io diagrams that respond to external data. By leveraging custom object properties and placeholder variables, it enables the creation of auto-updating system dashboards, architecture diagrams with live status indicators, and documentation that stays in sync with code. It provides a robust framework for mapping metrics to visual styles—such as color-coding based on latency thresholds—and includes a Python-based utility for programmatically updating diagram XML from APIs or JSON files.

Key Features

01Automated status-to-color mapping for health indicators

02Python automation script for live data synchronization

03Threshold-based formatting for performance metrics and gradients

0410 GitHub stars

05Metadata attachment via XML object tags for rich data storage

06Dynamic placeholder variables for auto-rendering property values

Use Cases

01Visualizing performance metrics directly within cloud system diagrams

02Real-time infrastructure health dashboards and status pages

03Automated technical architecture documentation linked to CI/CD data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude conditional-formatting

For use in Claude.ai and ChatGPT

Key Features

01Automated status-to-color mapping for health indicators

02Python automation script for live data synchronization

03Threshold-based formatting for performance metrics and gradients

0410 GitHub stars

05Metadata attachment via XML object tags for rich data storage

06Dynamic placeholder variables for auto-rendering property values

Use Cases

01Visualizing performance metrics directly within cloud system diagrams

02Real-time infrastructure health dashboards and status pages

03Automated technical architecture documentation linked to CI/CD data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markus41/claude conditional-formatting

For use in Claude.ai and ChatGPT