OpenSkillIndex← back to search
claude-code

Claude-skill-registry-data mermaid-diagram

Mermaid 플로우/시퀀스 다이어그램이 필요할 때

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry-data
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry-data "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/mermaid-diagram" ~/.claude/skills/majiayu000-claude-skill-registry-data-mermaid-diagram-86bbba && rm -rf "$T"
manifest: data/mermaid-diagram/SKILL.md
source content

Mermaid 다이어그램 스킬

Mermaid 문법을 사용하여 다이어그램을 생성합니다. 포트폴리오의 프로세스 흐름, 시퀀스 다이어그램 작성에 적합합니다.

언제 이 방식을 사용하는가?

상황Mermaid 적합
플로우차트비즈니스 로직, 의사결정 트리, 프로세스 흐름
시퀀스 다이어그램API 호출 흐름, 시스템 간 통신 (포트폴리오 핵심)
ER 다이어그램데이터베이스 스키마, 엔티티 관계
상태 다이어그램상태 머신, 주문 라이프사이클
C4 다이어그램시스템 컨텍스트, 컨테이너 구조

장점

  • 텍스트 기반 문법으로 빠른 작성
  • 자동 레이아웃 (노드 배치 자동화)
  • 복잡한 분기/조건 표현 용이
  • Git 버전 관리 용이
  • 20개 이상의 다이어그램 유형 지원

단점

  • 세밀한 레이아웃 조정 어려움 → 
    /svg-diagram
    사용
  • 커스텀 스타일 제한적
  • Mermaid CLI 설치 필요 (SVG 파일 생성 시)

지원 다이어그램

기본 (자주 사용)

유형키워드용도
Flowchart
flowchart
흐름도, 프로세스, 의사결정
Sequence Diagram
sequenceDiagram
API 흐름, 시스템 간 통신
Class Diagram
classDiagram
클래스 관계, UML
State Diagram
stateDiagram-v2
상태 머신, 라이프사이클
ER Diagram
erDiagram
DB 스키마, 테이블 관계

고급

유형키워드용도
Gantt Chart
gantt
프로젝트 일정
GitGraph
gitGraph
Git 브랜치 시각화
C4 Diagram
C4Context
시스템 아키텍처
Mindmap
mindmap
개념 정리
Quadrant Chart
quadrantChart
기술 평가 매트릭스
XY Chart
xychart-beta
수치 데이터, 트래픽

전체 문법: 

references/syntax.md
참조

용도별 다이어그램 선택

용도추천 다이어그램
로직/흐름 설명Flowchart
API/통신 흐름Sequence
시스템 구조Architecture / C4 / Block
클래스 관계Class Diagram
상태 변화State Diagram
DB 스키마ER Diagram
일정/타임라인Gantt / Timeline
Git 브랜치GitGraph
기술 평가Quadrant Chart

빠른 시작 예시

Flowchart

flowchart TD
    A[시작] --> B{조건}
    B -->|Yes| C[처리 1]
    B -->|No| D[처리 2]
    C --> E[종료]
    D --> E

Sequence Diagram

sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Database

    C->>S: HTTP Request
    S->>D: Query
    D-->>S: Result
    S-->>C: HTTP Response

ER Diagram

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    USER {
        long id PK
        string name
    }

파일 구조

docs/career/portfolio/
├── portfolio.md
└── images/
    ├── api-sequence.mmd        # Mermaid 소스 (선택)
    ├── api-sequence.svg        # 생성된 SVG
    └── order-flow.svg

파일명 규칙

유형파일명 예시
시퀀스 다이어그램
{feature}-sequence.svg
플로우차트
{process}-flow.svg
ER 다이어그램
{domain}-er.svg

작성 절차

  1. Mermaid 코드 작성: 
    .mmd
    파일 또는 마크다운 코드 블록
  2. SVG 변환: 
    mmdc -i diagram.mmd -o diagram.svg
  3. 파일 저장: 
    docs/career/portfolio/images/
  4. 마크다운에서 참조: 
    ![설명](./images/{diagram-name}.svg)
  5. git add 실행

주의사항

  1. 파일명: kebab-case 사용 (예: 
    api-sequence.svg
    )
  2. 위치: 
    docs/career/portfolio/images/
    폴더에 저장
  3. 한글: 일부 폰트에서 깨질 수 있음 - 테스트 필요
  4. 복잡한 레이아웃: 자동 배치가 마음에 안 들면 
    /svg-diagram
    사용

체크리스트

  • 다이어그램 유형이 목적에 적합한가?
  • 파일명이 kebab-case인가?
  • SVG 파일이 
    images/
    폴더에 있는가?
  • 마크다운에서 올바르게 참조했는가?
  • git add 실행했는가?

참조 문서

문서내용
references/syntax.md
모든 다이어그램 문법 상세
references/cli-styling.md
CLI 사용법, 테마, 스타일링

외부 자료

관련 스킬

  • /write-portfolio
    : 포트폴리오 작성 (다이어그램 포함)
  • /svg-diagram
    : SVG 직접 생성 (정교한 레이아웃)
  • /export
    : PDF 내보내기