markdown-viewer/uml

Crie diagramas UML usando sintaxe PlantUML. Ideal para modelagem de software — diagramas de Classe, Sequência, Atividade, Máquina de Estados, Componente, Caso de Uso e Implantação com notação textual concisa e layout automático.

O que é uml?

Este skill, markdown-viewer/uml, permite que você crie diagramas UML diretamente no editor de código ou ambiente de chat, utilizando a sintaxe PlantUML. É especialmente útil para desenvolvedores que precisam modelar software de forma rápida e eficiente, sem sair do fluxo de trabalho. Compatível com ferramentas como Claude Code, Cursor e Codex, o skill interpreta blocos de código PlantUML e os renderiza como diagramas visuais. Com ele, você pode descrever, por exemplo, diagramas de classe, sequência, atividade, máquina de estados, componente, caso de uso e implantação, todos com notação textual simples e layout automático. Isso agiliza a comunicação de arquiteturas e fluxos de sistema, eliminando a necessidade de ferramentas externas pesadas.

Funciona com~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/uml

Installed? Explore more Programação e Desenvolvimento skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que uml faz?

Crie diagramas UML usando sintaxe PlantUML. Ideal para modelagem de software — diagramas de Classe, Sequência, Atividade, Máquina de Estados, Componente, Caso de Uso e Implantação com notação textual concisa e layout automático.

Como usar

Para criar um diagrama UML, utilize um bloco de código com a linguagem plantuml (ou puml). O conteúdo deve seguir a sintaxe PlantUML.

Exemplo de diagrama de classe

@startuml
class Cliente {
  +nome: String
  +email: String
  +fazerPedido()
}

class Pedido {
  -id: Integer
  +total: Decimal
  +calcularFrete()
}

Cliente "1" --> "*" Pedido : faz
@enduml

Exemplo de diagrama de sequência

@startuml
participant Usuário
participant Sistema

Usuário -> Sistema: Fazer login
Sistema -> Usuário: Token de autenticação
@enduml

Tipos de diagramas suportados

  • Diagrama de Classe – modela classes, atributos, métodos e relacionamentos.
  • Diagrama de Sequência – mostra interações entre objetos ao longo do tempo.
  • Diagrama de Atividade – modela fluxos de trabalho ou processos.
  • Diagrama de Máquina de Estados – descreve estados e transições de um objeto.
  • Diagrama de Componente – exibe componentes de software e suas dependências.
  • Diagrama de Caso de Uso – representa funcionalidades do sistema e atores.
  • Diagrama de Implantação – mostra a arquitetura física de implantação.

Dicas

  • Use @startuml e @enduml para delimitar o diagrama.
  • A sintaxe é sensível a espaços e indentação para certos elementos.
  • Consulte a documentação oficial do PlantUML para mais detalhes.

Requisitos

  • Ambiente com suporte a PlantUML (geralmente incluído em ferramentas como Claude Code, Cursor, Codex).
  • Nenhuma instalação adicional necessária se o skill estiver ativo.

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

markdown-viewer/archimate

Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.

markdown-viewer/architecture

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

markdown-viewer/bpmn

Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.

markdown-viewer/canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

markdown-viewer/cloud

Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.

markdown-viewer/data-analytics

Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.

markdown-viewer/graphviz

Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.

markdown-viewer/infocard

Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.

markdown-viewer/iot

Create IoT architecture diagrams using PlantUML syntax with device and sensor stencil icons. Best for smart home, industrial IoT (IIoT), fleet management, edge computing, and sensor network layouts.

markdown-viewer/mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/network

Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.

markdown-viewer/security

Create security architecture diagrams using PlantUML syntax with identity, encryption, firewall, and compliance stencil icons. Best for IAM flows, zero-trust models, encryption pipelines, and threat detection architectures.

markdown-viewer/vega

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

Habilidades Relacionadas