CategoryWeightCategory scoreContribution

Securityprompt, exec, net, exfil, eval

35%

0.0 pts

Supply chainhash, typosquat, maintainer, lockfile

20%

100

20.0 pts

Maintenancestaleness, pinning, CI

15%

100

15.0 pts

TransparencySKILL.md, perms, README

15%

100

15.0 pts

Communityinstalls, verify, response

15%

100

15.0 pts

Findings & checks · 42 flagged

Securityscore 0 · 42 findings

HIGHLong base64-encoded blob hidden in the skill documentationSS-SKILL-INJECT-B64-PAYLOAD-01 · Prompt injection · .qoder/repowiki/en/meta/repowiki-metadata.json×42

HIGH — once decoded by the agent, an encoded payload has the same impact class as plain-text injection.

Why it matters

A base64 string of 128+ characters appears in a documentation file. Encoded prompt injection hides the hostile instruction in base64 — invisible to keyword filters — and relies on the agent's ability to decode it at runtime. There is no normal authoring reason to embed a multi-hundred-byte base64 blob in skill docs.

The exact value spotted

excerpt.qoder/repowiki/en/meta/repowiki-metadata.json· json

1{"code_snippets":[{"id":"24009835485d3aa8f69c98c72f5d69b4","path":"main.css","line_range":"1

… (108 chars elided on L1)

Occurrences

42 occurrences · first at L1, also L1, L1 +39 more

Show all 42 locations

Line

File

.qoder/repowiki/en/meta/repowiki-metadata.json

How to fix

Remove the encoded blob, or decode it and review what it actually contains.

Decode the base64 string and confirm it is not an instruction directed at the agent.
Move any legitimate binary or signature data into a dedicated file (*.sig, SIGNATURES) outside the documentation.

Framework references

OWASPLLM01 ATLASAML.T0051

Trace & refs

ruleSS-SKILL-INJECT-B64-PAYLOAD-01sha25622dc022eee9197e7…rubric 365aacaView on GitHub

Supply chainscore 100 · 0 findings

✓—All supply chain checks passedNo findings in this category for the latest scan.pass

Maintenancescore 100 · 0 findings

✓—All maintenance checks passedNo findings in this category for the latest scan.pass

Transparencyscore 100 · 0 findings

✓—All transparency checks passedNo findings in this category for the latest scan.pass

Communityscore 100 · 0 findings

✓—All community checks passedNo findings in this category for the latest scan.pass

The primary manifest — the file an agent reads to learn what this artifact does.

README.md · 1 file

README.md17.1 KB · Markdown

Code-To-UML

Transform code into interactive UML reports and explore 100+ diagram examples with English/Chinese coverage — browser-first, zero build tools.

[中文文档](README_zh.md)

<a href="https://github.com/pingwurth/code-to-uml/stargazers"><img src="https://img.shields.io/github/stars/pingwurth/code-to-uml?style=social" alt="GitHub Stars"></a> <a href="https://github.com/pingwurth/code-to-uml/network/members"><img src="https://img.shields.io/github/forks/pingwurth/code-to-uml?style=social" alt="GitHub Forks"></a> <a href="https://github.com/pingwurth/code-to-uml/issues"><img src="https://img.shields.io/github/issues/pingwurth/code-to-uml" alt="GitHub Issues"></a> <a href="https://github.com/pingwurth/code-to-uml/pulls"><img src="https://img.shields.io/github/issues-pr/pingwurth/code-to-uml" alt="GitHub Pull Requests"></a> <a href="https://github.com/pingwurth/code-to-uml/graphs/contributors"><img src="https://img.shields.io/github/contributors/pingwurth/code-to-uml" alt="GitHub Contributors"></a> <a href="https://github.com/pingwurth/code-to-uml/blob/main/LICENSE"><img src="https://img.shields.io/github/license/pingwurth/code-to-uml" alt="License"></a>

<a href="#why-code-to-uml">Why Code-To-UML?</a> · <a href="#demo">Demo</a> · <a href="#getting-started">Getting Started</a> · <a href="#contributing">Contributing</a> · <a href="#links">Links</a>

Why Code-To-UML?

"In the AI era, the ability to read code is scarcer than the ability to write it."

Code-To-UML is the embodiment of this philosophy. It's not just another PlantUML online editor — it's a complete toolchain that lets AI understand your code, draw architecture diagrams, and generate bilingual reports.

Six Core Pain Points, One Solution

Pain Point	Problem Description	Code-To-UML Solution
🔍 System Analysis Difficulty	Complex codebases make it hard to quickly understand overall architecture and module relationships	One-click generation of project/module/file-level architecture diagrams with interactive navigation
📝 Design Documentation Burden	Organizing existing code logic requires reading hundreds of lines method by method	Auto-generated 13-dimension analysis reports with intelligent code snippet extraction (< 30 lines)
🐛 Inefficient Debugging	Line-by-line code reading for troubleshooting is extremely inefficient	Call relationship diagrams to quickly locate problem paths, data flow diagrams to track state changes
🤖 AI Code Review	In the Vibe Coding era, AI-generated code needs more efficient review tools	Quickly understand AI-generated code structure, identify potential architecture issues and risks
📚 Rapid Framework Learning	Learning new tech stacks and participating in open-source maintenance requires quick code comprehension	Auto-generated developer onboarding guides, core principles and design decision visualization
🎯 Reading Code > Writing Code	Code comprehension ability becomes a core competitive advantage	AI skill integration, supporting mainstream AI tools like Cursor, Claude Code, and more

Core Value: Transform code into interactive UML reports, improving code comprehension efficiency by 10x

Demo

Key Features

✅ Browser-First Rendering — PlantUML WASM, zero server latency
✅ Automatic Fallback — Client fails → server-side retry with plantuml.jar
✅ Interactive Lightbox — Full-screen with zoom, pan, keyboard navigation
✅ Side TOC with Scroll Sync — Always-visible navigation for long reports
✅ No Build Tools — Zero npm overhead, pure HTML/JS served directly
✅ Reusable Templates — Generate analysis reports from structured .ctu data files
✅ AI Skill Integration — Bundled SKILL.md for AI agents to auto-generate reports

Why Code-To-UML?
About
Supported Diagram Types
Tech Stack
Getting Started
Usage
Project Structure
API Reference
Configuration
Architecture
AI Agent Integration
Contributing
License
Links

About

Most UML documentation workflows rely on heavyweight IDEs, fragile build pipelines, or opaque SaaS tools. Code-To-UML takes a different approach:

Code Analysis Reports — Feed source code to an AI agent and get back a self-contained HTML report with UML diagrams, bilingual explanations, and interactive navigation.
Diagram Showcase — Browse 100+ PlantUML examples with English/Chinese coverage across 20+ diagram types, rendered live in your browser.
AI Agent Skill — A bundled skill definition (SKILL.md) lets Cursor, Claude Code, Qwen, Codex, and other AI assistants generate reports autonomously.

No frameworks. No transpilers. No node_modules. Start the lightweight server and go.

Supported Diagram Types

Category	Types
UML	Sequence, Use Case, Class, Object, Activity, Component, Deployment, State, Timing
Non-UML	Gantt, MindMap, WBS, EBNF, Regex, Network (nwdiag), JSON, YAML, Archimate, Salt (Wireframe)

Tech Stack

Layer	Technology
Server	Node.js lightweight dev server (`serve.js`, ~600 lines)
Runtime	Vanilla ES6+ JavaScript — no frameworks, no npm dependencies
Client Rendering	PlantUML WASM via `plantuml.js`
Server Rendering	`plantuml.jar` (Java) — automatic fallback
Graph Layout	Graphviz via Viz.js
Data Format	`.ctu` structured text files
Internationalization	Custom JS system, localStorage persistence, `docs:langchange` event
Styling	Pure CSS with custom properties for theming

Getting Started

Prerequisites

Node.js 18+
Java (optional, only for server-side PlantUML rendering fallback)

Installation

Clone the repository:

git clone https://github.com/pingwurth/code-to-uml.git
cd code-to-uml

Optional: set up CTU_HOME and install the bundled AI skill:

node install.js
# Install for one tool only
node install.js codex
# Print the current-shell CTU_HOME command without writing profile files
node install.js --print

install.js writes CTU_HOME for AI report generation and copies the bundled skill into supported agent directories. It is not required for browsing demos.

Start the server from the project root:

./serve.sh
# or specify a custom port
./serve.sh 5401
# or directly with Node
node serve.js 5401

Open your browser:

# Visit the following URL to view analysis examples
http://localhost:5401
# Or browse the diagram showcase
http://localhost:5401/demo.html
# Or view UML syntax examples
http://localhost:5401/plantuml-official-demo/en/sequence-diagram_en.html

No npm install. No build step. That's it.

Usage

Usage Examples

Use the /code-to-uml slash command in your AI agent to generate UML-backed HTML reports at any scope:

File-level analysis

/code-to-uml Please analyze the file component/render-failure-common.js and generate a UML-backed, consistently formatted HTML report.

Function-level analysis

/code-to-uml Please analyze the renderWithFailureHandling function and generate a UML-backed, consistently formatted HTML report.

Project-level analysis

/code-to-uml Please analyze the entire code-to-uml project and generate a UML-backed, consistently formatted HTML report.

Module-level analysis

/code-to-uml Please analyze the component/ module and generate a UML-backed, consistently formatted HTML report.

All four commands produce the same 13-section report structure — scope changes the depth and examples, not the section contract. Reports are saved to cache/ and accessible via index.html.

Interactive Demo

Open http://localhost:5401/demo.html after starting the server to browse all diagram examples. Use the tab bar to switch diagram types and the language toggle to switch between English and Chinese.

Generating Reports

Place .ctu data files in data/claude-code-demo-analysis/ (or another data/<report-slug>/ directory).
Use the AI skill (see AI Agent Integration) or manually create an HTML report using cache/_TEMPLATE.html.
Generated reports appear in cache/ and are accessible from index.html.

.ctu File Format

Each .ctu file defines a file-level Title and Describe, followed by one or more repeated [Example], [Description], [UML], and [Detail] groups:

Title: Section Title
Describe: Description
------------------------------------------------------------
[Example]
Example title

[Description]
Markdown description of what this diagram demonstrates

[UML]
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi there
@enduml

[Detail]
Explanation of diagram elements and syntax
------------------------------------------------------------

Naming convention: {diagram-type}--{number}_{language}.ctu

Examples: sequence--1_en.ctu, class--3_zh.ctu, activity--2_en.ctu

Project Structure

code-to-uml/
├── serve.js                 # Dev server + API endpoints
├── demo.html                # Main diagram viewer SPA
├── demo.js                  # Page controller
├── index.html               # Home / cache index
├── main.css                 # All styles
├── i18n-config.js           # i18n runtime
├── i18n/
│   ├── zh.js                # Chinese strings
│   └── en.js                # English strings
├── component/               # Reusable UI components
│   ├── docs-page-core.js    # Core page logic
│   ├── render-failure-common.js  # Error handling
│   ├── demo-example-component.js # Example card renderer
│   └── toc-component.js     # Table of contents
├── data/
│   ├── demo/                # Built-in examples (.ctu files)
│   ├── _TEMPLATE.ctu        # Template for new reports
│   └── claude-code-demo-analysis/  # Example: analysis report data
├── cache/
│   ├── _TEMPLATE.html       # Reusable report HTML template
│   └── (generated reports)
├── docs/images/             # README demo GIFs
├── js/                      # PlantUML + theme libraries
├── plantuml-official-demo/  # Official PlantUML reference docs
├── skills/code-to-uml/
│   └── SKILL.md             # AI agent skill definition
├── test/                    # Node-based tests
├── package.json             # npm scripts and package metadata
├── serve.sh / serve.bat     # Platform launchers
├── CLAUDE.md                # Claude Code guidance
├── AGENTS.md                # Agent documentation
└── install.js               # CTU_HOME and AI skill installer

API Reference

`GET /api/demo-examples`

Returns parsed .ctu examples for the diagram viewer.

Parameter	Type	Description
`lang`	`en` \	`zh`	Language filter (default: `zh`)
`dir`	string	Data subdirectory under `data/` (default: `demo`)

Response: JSON object keyed by diagram/category name. Each value is an array of parsed example objects.

`POST /api/plantuml-svg`

Server-side PlantUML rendering fallback.

Field	Description
Body	JSON object with a `source` string
Content-Type	`application/json`
Response	JSON object with an `svg` string, or an `error` string

`GET /api/cache-html`

Returns generated HTML reports from cache/ for the home page index.

`DELETE /api/cache-html`

Deletes one generated report and its matching data/<report-slug>/ directory.

Field	Description
Body	JSON object with a `path` field, such as `cache/example.html`

`DELETE /api/cache-html/all`

Deletes generated cache reports and matching generated data directories while preserving templates.

Configuration

Setting	Mechanism	Default
Server port	`PORT` env var or CLI argument	`5401`
Server root	Current working directory when running `serve.js`	CWD
AI report root	`CTU_HOME` env var (set by `install.js`)	Project root at install time
UI language	`localStorage` key `plantuml-docs-lang`	`en`
Theme	CSS custom properties in `main.css`	Light

Architecture

The rendering pipeline uses a two-tier strategy for maximum reliability:

User opens http://localhost:5401/demo.html
        │
        ▼
  [Render Queue]
        │
        ▼
  Try browser rendering (plantuml.js WASM)
        │
        ▼
  Rendered? ── Yes ──▶ Display SVG
        │
       No
        │
        ▼
  Detect error type
        │
        ▼
  Retry server-side (POST /api/plantuml-svg)
        │
        ▼
  Success? ── Yes ──▶ Display SVG
        │
       No
        │
        ▼
  Show error message + recovery action

Key design decisions:

WASM-first eliminates server round-trips for the majority of diagrams.
Automatic fallback handles edge cases where WASM has limitations (large diagrams, certain stdlib imports).
Error categorization enables targeted retry logic rather than blind retries.

AI Agent Integration

Code-To-UML ships with a skill definition at skills/code-to-uml/SKILL.md that enables AI coding assistants to generate analysis reports.

Supported Agents

Cursor (via Rules / AGENTS.md)
Claude Code (via CLAUDE.md)
Qwen Coder
OpenAI Codex
Any agent supporting skill/tool definitions

Setup

Run node install.js to register the project path.
Point your AI agent to skills/code-to-uml/SKILL.md.
Ask the agent to analyze a codebase — it will produce .ctu data files and an HTML report.

Contributing

We welcome contributions from the community! Please read our Contributing Guide before submitting a Pull Request.

Areas where contributions are welcome:

New diagram examples — Add .ctu files for under-represented diagram types
Localization — Extend beyond English/Chinese
Theme variants — Additional CSS custom property sets
PlantUML stdlib coverage — Examples using AWS, Azure, K8s icon libraries
Testing — Expand the test suite in test/
Bug fixes — Check our open issues
Documentation — Improve guides and examples

Quick Contribution Links

License

MIT

code-to-uml— agent skill

Is code-to-uml safe to install?

Code-To-UML

Why Code-To-UML?

Six Core Pain Points, One Solution

Demo

Key Features

Table of Contents

About

Supported Diagram Types

Tech Stack

Getting Started

Prerequisites

Installation

Usage

Usage Examples

Interactive Demo

Generating Reports

.ctu File Format

Project Structure

API Reference

`GET /api/demo-examples`

`POST /api/plantuml-svg`

`GET /api/cache-html`

`DELETE /api/cache-html`

`DELETE /api/cache-html/all`

Configuration

Architecture

AI Agent Integration

Supported Agents

Setup

Contributing

Quick Contribution Links

License

Links

Documentation

Community

Audit the pieces. Scan the whole. Decide.

Is code-to-uml safe to install?

Code-To-UML

Why Code-To-UML?

Six Core Pain Points, One Solution

Demo

Key Features

Table of Contents

About

Supported Diagram Types

Tech Stack

Getting Started

Prerequisites

Installation

Usage

Usage Examples

Interactive Demo

Generating Reports

.ctu File Format

Project Structure

API Reference

GET /api/demo-examples

POST /api/plantuml-svg

GET /api/cache-html

DELETE /api/cache-html

DELETE /api/cache-html/all

Configuration

Architecture

AI Agent Integration

Supported Agents

Setup

Contributing

Quick Contribution Links

License

Links

Documentation

Community

Social

Audit the pieces. Scan the whole. Decide.

`GET /api/demo-examples`

`POST /api/plantuml-svg`

`GET /api/cache-html`

`DELETE /api/cache-html`

`DELETE /api/cache-html/all`