FlowZap MCP 서버

Claude, Cursor, Windsurf 및 기타 8개의 MCP 호환 도구와 같은 AI 어시스턴트를 사용하여 워크플로우, 시퀀스 및 아키텍처 다이어그램을 생성하세요.

FlowZap은 FlowZap Code라는 텍스트 기반 DSL을 사용하는 시각적 워크플로우 다이어그램 도구입니다. 이 MCP 서버를 사용하면 AI 어시스턴트가 다이어그램을 대신 생성해 줍니다.

FlowZap이란 무엇인가요?

FlowZap은 FlowZap Code DSL을 사용하여 텍스트 프롬프트를 3중 뷰 다이어그램(워크플로우, 시퀀스 및 아키텍처)으로 변환합니다. Mermaid나 PlantUML이 아니며, 단순성과 AI 생성을 위해 설계된 고유한 도메인 특화 언어입니다.

핵심 사실:

4가지 모양만 사용: circle, rectangle, diamond, taskbox
노드 속성은 콜론 사용: label:"Text"
엣지 라벨은 등호 사용: [label="Text"]
핸들 처리: n1.handle(right) -> n2.handle(left)
레인 표시 라벨은 여는 중괄호와 같은 줄에 있어야 함: laneName { # Label
시퀀스 다이어그램 품질: 모든 레인 간 요청은 다음 주요 요청 전에 일치하는 응답 엣지가 필요함; 엣지는 시간순으로 정의; 요청 → 응답 → 다음 요청 리듬을 엄격히 유지; 고립된 노드 금지

설치

FlowZap MCP 서버는 Model Context Protocol(MCP)을 지원하는 모든 도구와 함께 작동합니다:

모든 호환 코딩 도구

도구	구성 방법
Claude Desktop	`claude_desktop_config.json`에 추가: macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` Windows: `%APPDATA%\Claude\claude_desktop_config.json`
Claude Code	실행: `claude mcp add --transport stdio flowzap -- npx -y flowzap-mcp` 또는 프로젝트 루트의 `.mcp.json`에 추가.
Cursor	설정 → 기능 → MCP 서버 → 서버 추가. 동일한 JSON 구성을 사용하세요.
Windsurf IDE	`~/.codeium/windsurf/mcp_config.json`에 추가
OpenAI Codex	`~/.codex/config.toml`에 추가: `[mcp_servers.flowzap]` `command = "npx"` `args = ["-y", "flowzap-mcp"]` 또는 실행: `codex mcp add flowzap -- npx -y flowzap-mcp`
Warp Terminal	설정 → MCP 서버 → "+ 추가" 클릭 → JSON 구성을 붙여넣으세요.
Zed Editor	`settings.json`에 추가: `{"context_servers": {"flowzap": {"command": "npx", "args": ["-y", "flowzap-mcp"]}}}`
Cline (VS Code)	Cline 사이드바 열기 → MCP 서버 아이콘 → `cline_mcp_settings.json` 편집
Roo Code (VS Code)	프로젝트 또는 전역 설정의 `.roo/mcp.json`에 추가.
Continue.dev	`.continue/mcpServers/flowzap.yaml`을 생성하고 다음을 입력: `name: FlowZap` `mcpServers:` `- name: flowzap` `command: npx` `args: ["-y", "flowzap-mcp"]`
Sourcegraph Cody	`openctx.providers` 구성을 통해 VS Code `settings.json`에 추가.

호환되지 않음: Replit 및 Lovable.dev는 URL을 통한 원격 MCP 서버만 지원합니다. 대신 공용 API를 사용하세요.

JSON 구성

모든 도구는 동일한 JSON 구성 형식을 사용합니다:

{
  "mcpServers": {
    "flowzap": {
      "command": "npx",
      "args": ["-y", "flowzap-mcp"]
    }
  }
}

Windows 사용자: 도구가 나타나지 않으면 절대 경로를 사용하세요:
"command": "C:\\Program Files\\nodejs\\npx.cmd"
where.exe npx 명령어로 npx 경로를 찾을 수 있습니다.

사용 가능한 도구

핵심 도구

도구	설명
`flowzap_validate`	FlowZap Code 구문 검증
`flowzap_create_playground`	공유 가능한 다이어그램 URL 생성
`flowzap_get_syntax`	FlowZap Code 구문 문서 가져오기

에이전트 중심 도구

도구	설명
`flowzap_export_graph`	추론을 위해 FlowZap Code를 구조화된 JSON 그래프(레인, 노드, 엣지)로 내보내기
`flowzap_artifact_to_diagram`	HTTP 로그, OpenAPI 사양 또는 코드를 FlowZap 다이어그램으로 파싱
`flowzap_diff`	두 버전의 FlowZap Code를 비교하고 구조화된 차이점 가져오기
`flowzap_apply_change`	구조화된 패치 작업(노드/엣지 삽입/제거/업데이트) 적용

사용 예시

기본 다이어그램 생성

AI 어시스턴트에게 요청하세요:

"이 앱에 구현된 현재 로그인 흐름의 시퀀스 다이어그램을 생성해 줘"
"주문 처리 시스템을 위한 워크플로우 다이어그램을 만들어 줘"
"마이크로서비스 API 게이트웨이를 위한 아키텍처 다이어그램을 만들어 줘"
"사용자 등록 흐름을 보여주는 순서도를 만들어 줘"
"빌드, 테스트, 배포 단계가 포함된 CI/CD 파이프라인을 다이어그램으로 그려 줘"

에이전트 중심 워크플로우

HTTP 로그를 다이어그램으로 파싱:

"Here are my nginx access logs. Create a sequence diagram showing the request flow."

에이전트는 artifactType: "http_logs"와 함께 flowzap_artifact_to_diagram을 사용합니다.

다이어그램 구조 분석:

"Which steps in this workflow touch the database?"

에이전트는 flowzap_export_graph를 사용하여 JSON 그래프를 가져온 다음 쿼리합니다.

변경 사항 표시:

"I updated the workflow. What's different from the previous version?"

에이전트는 flowzap_diff를 사용하여 이전 코드와 새 코드를 비교합니다.

안전한 증분 업데이트:

"Add a logging step after the API call in this diagram."

에이전트는 전체를 다시 생성하는 대신 구조화된 패치와 함께 flowzap_apply_change를 사용합니다.

어시스턴트는 다음을 수행합니다:

설명에 따라 FlowZap Code 생성
코드 검증
보기 및 공유를 위해 적절한 뷰(워크플로우, 시퀀스 또는 아키텍처)가 포함된 플레이그라운드 URL 생성

FlowZap Code 예시

sales { # Sales Team
  n1: circle label:"Order Received"
  n2: rectangle label:"Submit Order"
  n5: rectangle label:"Receive decision"
  n1.handle(right) -> n2.handle(left)
  n2.handle(bottom) -> fulfillment.n3.handle(top) [label="Submit"]
}

fulfillment { # Fulfillment
  n3: rectangle label:"Review Order"
  n4: rectangle label:"Return decision"
  n3.handle(right) -> n4.handle(left)
  n4.handle(top) -> sales.n5.handle(bottom) [label="Approved"]
}

보안

인증 불필요 - 공개 FlowZap API만 사용
사용자 데이터 접근 불가 - 다이어그램이나 계정을 읽을 수 없음
로컬 실행 - MCP 서버는 사용자 컴퓨터에서 실행됨
SSRF 보호 - flowzap.xyz에만 연결
속도 제한 - 클라이언트 측에서 분당 30회 요청
입력 검증 - 최대 코드 크기 50KB

에이전트 스킬 (skills.sh)

skills.sh를 통해 40개 이상의 호환 코딩 에이전트에 FlowZap 스킬을 설치하세요:

npx skills add flowzap-xyz/flowzap-mcp

skills.sh 목록: https://skills.sh/flowzap-xyz/flowzap-mcp/flowzap-diagrams
스킬 소스: skills/flowzap-diagrams/
호환 도구: Claude Code, Cursor, Windsurf, Codex, Gemini CLI, GitHub Copilot, Cline, Roo Code, Augment, OpenCode 등.

링크

라이선스

MIT

FlowZap MCP Server