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

• 시퀀스 다이어그램 품질: 모든 레인 간 요청은 다음 주요 요청 전에 일치하는 응답 엣지가 필요함; 엣지는 시간순으로 정의; 요청 → 응답 → 다음 요청 리듬을 엄격히 유지; 고립된 노드 금지

Related MCP server: Draw.io MCP Server

설치

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

모든 호환 코딩 도구

호환되지 않음: 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 경로를 찾을 수 있습니다.

사용 가능한 도구

핵심 도구

에이전트 중심 도구

사용 예시

기본 다이어그램 생성

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를 사용합니다.

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

1. 설명에 따라 FlowZap Code 생성

2. 코드 검증

3. 보기 및 공유를 위해 적절한 뷰(워크플로우, 시퀀스 또는 아키텍처)가 포함된 플레이그라운드 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 등.

링크

• FlowZap 웹사이트

• FlowZap Code 문서

• FlowZap MCP 블로그

• LLM 컨텍스트

• 템플릿 라이브러리

• npm 패키지

• GitHub 저장소

라이선스

MIT

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?Related Servers

Tools

• flowzap_apply_changeA
• flowzap_artifact_to_diagramB
• flowzap_create_playgroundA
• flowzap_diffA
• flowzap_export_graphA
• flowzap_get_syntaxB
• flowzap_validateA