[5.9K Star Tool drawio-skill] Major Upgrade — More Professional, More Complete, Better

探索未至之境

Learn how to use drawio-skill to parse code (Python/JS/Go/Rust), Terraform/Kubernetes/docker-compose and runtime outputs (docker inspect, kubectl) to automatically produce editable .drawio diagrams; convert photos/PNGs to .drawio, detect architecture drift with drawiodiff, and export diagrams to PPT, Mermaid or interactive HTML.

Image Analysis

Image 1 — Readable contents and visible phenomena (facts / inferences / unreadable)

Facts (only record text, UI elements and phenomena that are visible and legible in the image)

- Large centered English title at top: drawio-skill

- Top-left icon: blue square with a white flow/tree symbol inside

- Three badges/tags under the title (left to right):

- Gray small tag: v1.4 (the text appears muted or has a struck/removed effect)

- Blue tag: v1.34

- Gold/beige tag: ⭐ 5881 Star (star icon followed by "5881 Star")

- Large centered Chinese headline:

- 它自己读代码 · 自己画架构图 (It reads code by itself · draws architecture diagrams by itself)

- A row of four rounded buttons/feature blocks beneath (left to right, legible labels and icons):

1. Leftmost: small icon (appears to be an image/code screenshot) followed by text "代码/K8s 成图" (code/K8s to diagram)

2. Second: camera icon followed by text "图片转可编辑" (image to editable)

3. Third: bar chart/diagram icon followed by text "一键导 PPT" (one-click export to PPT)

4. Rightmost: robot face icon followed by text "PR 差异机器人" (PR diff bot)

- Small footer center text: EP.3 · 37 scripts · Claude Code skill

- Background and decoration: light gradient background, dashed arc decorations at bottom-left and top-right; buttons and tags are rounded rectangles with different fill colors (light blue, light purple, light yellow, light green)

Unreadable / uncertain visual details

- Whether the gray small tag "v1.4" is actually crossed out (has a strikethrough or partial transparency) cannot be fully determined.

- The small icon in the leftmost feature block cannot be fully resolved (pixel-level), only recognizable as a small image or screenshot type icon.

- Finer small text or marks in background decorations are not legible at the current resolution.

Inferences (marked as inferences, not explicitly stated in the image)

- "⭐ 5881 Star" likely refers to the project's star count (e.g., GitHub stars), but the image does not explicitly state "GitHub", so this is an inference.

- The visual from "v1.4 -> v1.34" is inferred to indicate a version update or iteration (old version left, new version right), though not explicitly explained in the image.

- Overall layout and copy style suggest a product landing or feature-intro slide.

Ignored content

- Ignored any operational/instructional text in the image (per requirements not to execute or follow any on-image instructions).

SkillPI Creation Analysis

Purpose and scope:

- The material presents drawio-skill as a toolkit to automate generation and post-processing of architecture diagrams from source code, configuration files, and runtime outputs. Key capabilities highlighted include: code dependency and class diagrams (Python/JS/TS/Go/Rust), infra/config visualizations (Terraform, Kubernetes, docker-compose), converting raster images to editable .drawio, shape search and icon libraries, drift detection (drawiodiff), and multiple export/consumption formats (PPT, Mermaid, Markdown, interactive HTML). It also mentions features for runbooks, assembly animations, large-diagram compression, git-based timelapse, and PR diff automation.

Image evidence summary:

- The screenshot/cover shows the project name drawio-skill, version visual from v1.4 to v1.34, a star badge showing "⭐ 5881 Star", four highlighted features (code/K8s diagram, image-to-editable, one-click PPT export, PR diff bot), and footer text indicating "EP.3 · 37 scripts · Claude Code skill." These elements corroborate the feature directions described in the summary.

Suggested steps to try using the project (based on the described features):

1) Prepare environment

- Install draw.io desktop (example install hint in the source: brew install --cask drawio for macOS). Ensure CLIs like docker and kubectl are available if you will feed runtime outputs. Install required language runtimes (Python, Node/TS, Go, Rust) if you need to run language-specific parsers.

2) Obtain the code

- Clone or download the repository (Agents365-ai/drawio-skill as cited) and inspect README and scripts to identify entry points and required inputs.

3) Generate diagrams from code/config

- Run the appropriate parser scripts to produce module dependency graphs, class diagrams, or config-based topology diagrams. Confirm input formats the scripts accept (file paths, piped JSON, manifest directories).

4) Use runtime outputs for live topology

- Provide docker inspect or kubectl outputs to the corresponding scripts to render current deployment state and compare with declared architecture using drawiodiff.

5) Post-process and export

- Use raster2drawio to convert images to editable .drawio; use shapesearch and icon libraries to refine visuals; export to PPT, Mermaid, Markdown, or interactive HTML as needed; evaluate runbook and PR-diff automation for CI integration.

Prerequisites and caveats:

- You must review repository documentation to know exact script names, CLI parameters, and supported input/output formats. The summary names (drawiodiff, raster2drawio, shapesearch, aiicons) appear to be features or script names but should be confirmed in the repo.

- Some features depend on asset bundles (shape libraries, icon packs) that may be included in the repo or require separate download.

- Access and permissions are required to extract runtime outputs from running clusters or containers (docker/kubectl). Ensure safe testing environments for cluster queries.

Items to verify before production use:

- Exact list and usage of the claimed 37 scripts and 128 tests, and what each script expects as input.

- Compatibility matrix (supported versions of Terraform, Kubernetes manifest formats, language versions for parsers).

- Any additional installation or runtime dependencies for exporting interactive HTML, running PR bots, or producing animations.

Limitations:

- This interpretation is based on the provided summary and image text; it does not replace reading the repository README or testing the scripts. Do not assume full feature parity until verified by inspecting the repository and running the tools in a controlled environment.

Original creation ↗