update-visualizations

Update Mermaid architecture and workflow diagrams from recent Git changes.

1|Updated Mar 3, 2026

Search Tags:#documentation #mermaid #architecture diagrams #dev tooling #git diff analysis #code-to-doc sync #visualization index

Ready to run

npx skills add https://github.com/AndreJorgeLopes/devflow --skill update-visualizations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: update-visualizations
Source: https://github.com/AndreJorgeLopes/devflow/tree/main/skills/update-visualizations
Command: npx skills add https://github.com/AndreJorgeLopes/devflow --skill update-visualizations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents stale architecture and workflow documentation by updating Mermaid visualizations after recent code changes, so diagrams stay aligned with how the project actually works.

Core Features & Use Cases

Change-aware diagram updates: Analyzes recent Git diffs to identify which visualizations are affected.
Config-driven visualization discovery: Locates visualization configuration via .devflow/visualizations.json, ~/.config/devflow/visualizations.json, or common docs folders.
Automated diagram creation and index maintenance: Creates missing diagrams using the project’s style guide and updates the visualization index (README) accordingly.
Hands-off workflow for documentation upkeep: Stages and commits visualization updates with a descriptive message.

Quick Start

Run the update-visualizations skill and let it analyze your latest Git changes, then automatically update and commit the affected Mermaid diagrams.

Frequently Asked Questions about update-visualizations

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

FAQPage Schema

How do I keep Mermaid architecture diagrams accurate after code changes?▼

To keep Mermaid architecture diagrams accurate, you can analyze recent Git diffs to identify affected visualization files and automatically update the diagrams to match the evolving codebase. This ensures documentation stays aligned with actual project workflows.

How do I automatically update documentation diagrams from a Git diff?▼

Automatically updating documentation diagrams from a Git diff involves analyzing the code changes, mapping them to existing visualization markdown files, and editing or creating Mermaid diagrams using the project's README style guide for consistent formatting.

Where does the tool look for visualization configuration files?▼

The tool looks for visualization configuration files by locating them via .devflow/visualizations.json, ~/.config/devflow/visualizations.json, or common docs folders. It reads the existing visualization index and files to determine what needs updating.

Does this diagram update workflow require a specific folder structure?▼

Yes, this diagram update workflow applies to projects that maintain visualization markdown files under a configured diagrams folder and use a README style guide. It requires this structure to locate configs and apply consistent formatting.

What is the best way to sync architecture visualizations with codebase updates?▼

The best way to sync architecture visualizations with codebase updates is to use a change-aware workflow that analyzes recent Git changes, updates the affected Mermaid diagrams, and stages and commits the visualization artifacts with a descriptive message.

How are missing workflow diagrams handled during visualization updates?▼

Missing workflow diagrams are handled through automated diagram creation, which generates the missing Mermaid visualizations using the project's style guide and updates the visualization index, or README, accordingly to maintain a complete documentation set.