classdiagram-to-crud

Generate CRUD HTML fragments from UML class diagram inputs.

Updated Feb 19, 2026
One-click install
npx skills add https://github.com/atanaka/uml-workflow-v3 --skill classdiagram-to-crud
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: classdiagram-to-crud
Source: https://github.com/atanaka/uml-workflow-v3/tree/main/skills/classdiagram-to-crud
Command: npx skills add https://github.com/atanaka/uml-workflow-v3 --skill classdiagram-to-crud

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

クラス図をもとに、WebアプリのCRUD画面の骨格を自動生成します。エンタティを素早く実装可能なHTMLフラグメントを提供することで、開発初期のUI/データモデル設計の手間を削減します。

Core Features & Use Cases

  • 各クラスにつき Create/Read/Update/Delete の4つのHTMLフラグメントを生成
  • 入力形式は PlantUML、draw.io、XMI、画像、テキスト記述、domain-model.json に対応
  • 生成物は単一ルート要素のHTMLフラグメントで、crud-composerなどの合成ツールに直接読み込める形式
  • 使い方の例: 例えば「顧客(Customer)と注文(Order)のCRUD画面を自動生成」

Quick Start

Generate four HTML fragments (create, read, update, delete) for each class from the provided diagram and name the files as lowercase_classname_create.html, lowercase_classname_read.html, lowercase_classname_update.html, and lowercase_classname_delete.html.

Frequently Asked Questions about classdiagram-to-crud

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

FAQPage Schema
How do I generate CRUD HTML fragments from a class diagram?

To generate CRUD HTML fragments from a class diagram, provide your UML input in formats like PlantUML, draw.io, XMI, image, or text descriptions. The tool outputs four single-root HTML fragments per class for create, read, update, and delete operations.

Can I use a draw.io diagram to automatically generate CRUD screens?

Yes, draw.io diagrams are supported inputs for generating CRUD screens. The tool processes your draw.io class diagrams to produce separate HTML fragments for create, read, update, and delete operations for each class in the diagram.

What formats are supported for generating CRUD UI from UML class diagrams?

Supported input formats for generating CRUD UI from UML class diagrams include PlantUML, draw.io, XMI, image files, text descriptions, and domain-model.json. Each format is parsed to produce create, read, update, and delete HTML fragments.

Does the generated CRUD HTML output contain JavaScript or multiple root elements?

The generated CRUD HTML output contains no inline JavaScript and uses a single root element per fragment. This structure ensures the fragments are ready for composition with tools like crud-composer without causing DOM conflicts.

How do I name the HTML files generated from my class diagram entities?

HTML files generated from class diagram entities should follow the naming convention of lowercase_classname_create.html, lowercase_classname_read.html, lowercase_classname_update.html, and lowercase_classname_delete.html for each corresponding CRUD operation.

What is the best way to scaffold Web app CRUD screens from a domain model?

The best way to scaffold Web app CRUD screens from a domain model is to input your domain-model.json or UML class diagram. This automatically generates single-root HTML fragments for create, read, update, and delete operations, reducing early UI design effort.