mermaid-diagrams
Criar diagramas com sintaxe Mermaid
Usuários têm dificuldade em criar diagramas de software profissionais que sejam versionáveis e fáceis de manter. Esta habilidade fornece orientação abrangente para criar diagramas usando a sintaxe baseada em texto do Mermaid, tornando a criação de diagramas acessível e gerenciável junto com o código.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「mermaid-diagrams」を使用しています。 Create a class diagram for a library system with Book, Author, and Member classes
期待される結果:
- ```mermaid
- classDiagram
- Book "*" --> "1" Author : written_by
- Member "1" --> "*" Loan : borrows
- Book "1" --> "*" Loan : has
- class Book {
- +string isbn
- +string title
- +date publicationDate
- +getDetails()
- }
- class Author {
- +string name
- +string nationality
- +getBooks()
- }
- class Member {
- +int memberId
- +string name
- +string email
- +borrowBook()
- +returnBook()
- }
- class Loan {
- +date loanDate
- +date dueDate
- +isOverdue()
- }
- ```
「mermaid-diagrams」を使用しています。 Show a user login and data retrieval sequence
期待される結果:
- ```mermaid
- sequenceDiagram
- participant U as User
- participant A as API
- participant D as Database
- U->>A: POST /api/login
- A->>D: Query user credentials
- D-->>A: User data
- alt Valid credentials
- A-->>U: 200 OK + JWT token
- U->>A: GET /api/profile
- A->>D: Fetch user profile
- D-->>A: Profile data
- A-->>U: Profile response
- else Invalid credentials
- A-->>U: 401 Unauthorized
- end
- ```
「mermaid-diagrams」を使用しています。 Design an ERD for an e-commerce system
期待される結果:
- ```mermaid
- erDiagram
- CUSTOMER ||--o{ ORDER : places
- ORDER ||--|{ ORDER_ITEM : contains
- PRODUCT ||--o{ ORDER_ITEM : included_in
- PRODUCT ||--o{ REVIEW : has
- CUSTOMER ||--o{ REVIEW : writes
- CUSTOMER {
- int id PK
- string email UK
- string name
- string address
- }
- ORDER {
- int id PK
- int customer_id FK
- decimal total
- string status
- }
- PRODUCT {
- int id PK
- string sku UK
- string name
- decimal price
- }
- ```
セキュリティ監査
安全This is a documentation-only skill containing markdown files with Mermaid syntax examples. All static findings are false positives from the scanner misinterpreting markdown code blocks, example text, and documentation references. No scripts, executable code, network calls, or command execution exist in this skill.
品質スコア
作れるもの
Documentar arquitetura de software
Criar diagramas C4 para documentar contexto do sistema, containers, componentes e relacionamentos em nível de código para documentação técnica e comunicação com stakeholders.
Visualizar interações de API
Gerar diagramas de sequência mostrando fluxos de requisição/resposta, sequências de autenticação e padrões de comunicação serviço a serviço.
Projetar esquemas de banco de dados
Construir diagramas de relacionamento de entidades para modelar tabelas, chaves e cardinalidade para design e documentação de banco de dados.
これらのプロンプトを試す
Create a Mermaid class diagram showing the relationship between {entity1} and {entity2}. Include attributes and methods for each class.Generate a Mermaid sequence diagram for a {action} flow involving {participants}. Show authentication, data transfer, and response handling.Create a C4 {level} diagram for a {system_type} showing {components} and their relationships. Include external users and dependencies.Design a Mermaid ERD for a {domain} domain with {entities} entities. Include primary keys, foreign keys, and cardinality indicators.ベストプラクティス
- Usar convenções de nomenclatura consistentes e rótulos claros para tornar os diagramas autodocumentados
- Começar com entidades centrais e adicionar detalhes gradualmente para evitar complexidade excessiva
- Armazenar arquivos Mermaid (.mmd) junto com o código em controle de versão para facilitar atualizações
回避
- Incluir detalhes excessivos em um único diagrama - dividir diagramas complexos em visualizações focadas
- Usar rótulos confusos ou ambíguos que exigem explicação fora do diagrama
- Deixar de atualizar diagramas quando a estrutura do código muda, levando à deriva da documentação