스킬 mermaid-diagrams
📊

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.

지원: Claude Codex Code(CC)
🥉 76 브론즈
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"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
  • }
  • ```

보안 감사

안전
v1 • 1/26/2026

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.

8
스캔된 파일
3,148
분석된 줄 수
0
발견 사항
1
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude

품질 점수

59
아키텍처
100
유지보수성
87
콘텐츠
26
커뮤니티
100
보안
91
사양 준수

만들 수 있는 것

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.

이 프롬프트를 사용해 보세요

Solicitação básica de diagrama
Create a Mermaid class diagram showing the relationship between {entity1} and {entity2}. Include attributes and methods for each class.
Diagrama de fluxo de API
Generate a Mermaid sequence diagram for a {action} flow involving {participants}. Show authentication, data transfer, and response handling.
Documentação de arquitetura
Create a C4 {level} diagram for a {system_type} showing {components} and their relationships. Include external users and dependencies.
Design de esquema de banco de dados
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

자주 묻는 질문

Como renderizo diagramas Mermaid?
Diagramas Mermaid são renderizados automaticamente no GitHub, GitLab e em muitos editores de markdown. Para outras plataformas, use o Mermaid Live Editor (mermaid.live) ou a ferramenta Mermaid CLI.
Posso usar Mermaid no VS Code?
Sim, instale a extensão Markdown Mermaid para VS Code para visualizar diagramas enquanto edita arquivos markdown.
Quais tipos de diagramas são suportados?
Mermaid suporta diagramas de classes, sequência, fluxograma, estado, relacionamento de entidades, gantt, pizza, git graph e C4.
Como estilizo meus diagramas?
Use o frontmatter de config para aplicar temas (default, forest, dark, neutral, base) e personalizar cores, fontes e formas.
Posso exportar diagramas como imagens?
Sim, use a CLI Mermaid para exportar como PNG ou SVG: mmdc -i input.mmd -o output.png
Como lidar com layouts complexos?
Use subgraphs para agrupar nós relacionados e a opção de layout elk para posicionamento avançado de diagramas complexos.

개발자 세부 정보