BESSER-PEARL

Uml Drawing Skill — Design skill for Claude Code

Design community

Agent Skill: draw a correct UML class diagram via BESSER B-UML and generate SVG/PNG outputs in one call — no browser.

How to install Uml Drawing Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open BESSER-PEARL/uml-drawing-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Uml Drawing Skill does

Agent Skill: draw a correct UML class diagram via BESSER B-UML and generate SVG/PNG outputs in one call — no browser. For READMEs, design docs, wikis, and slides.

Alternatives in Design

Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★

README

UML Drawing — diagrams as code, for your docs

[![License](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](LICENSE) [![Agent Skill](https://img.shields.io/badge/agent--skill-compatible-brightgreen)](https://agentskills.io) [![Release](https://img.shields.io/github/v/release/BESSER-PEARL/uml-drawing?color=orange&label=release)](https://github.com/BESSER-PEARL/uml-drawing/releases/latest) [![Part of BESSER Skills](https://img.shields.io/badge/part%20of-BESSER%20Skills-orange)](https://github.com/BESSER-PEARL/besser-skills)

**An [Agent Skill](https://agentskills.io) by [BESSER](https://besser-pearl.org) that gives your AI coding agent one job and makes it do it right: put a correct UML class diagram — as a real, rendered image — into your docs.**

This skill supports two common workflows:

**1. Design a system from a description**. Describe your domain in natural language, and the agent creates a B-UML model and renders the corresponding UML class diagram.

You:   "Add a class diagram of our vehicle fleet to the README."
Agent: ‣ models Vehicle · Car · Truck · ElectricCar with correct inheritance
       ‣ renders it to a real SVG itself — one call, no browser
       ‣ embeds  ![Vehicle fleet](examples/vehicles.svg)

**2. Document an existing codebase**. Point the agent to your source code, and it extracts the classes and relationships, creates the B-UML model, and generates the diagram.

You:   "Diagram the classes in src/fleet/ for the docs."
Agent: ‣ reads your existing code, recovers the classes and how they relate
       ‣ builds the same validated B-UML model and renders the SVG

The result is a diagram generated from a validated model that can be included directly in README files, design documents, wikis, and presentations.

UML class diagram rendered from B-UML by the uml-drawing skill