Community코딩 & 개발github.com

markdown-viewer/canvas

JSON 형식으로 자유롭게 배치된 노드를 사용하여 공간 다이어그램을 생성합니다. 개념 지도, 지식 그래프, 정확한 x/y 좌표 제어가 필요한 기획 보드에 최적입니다.

canvas란 무엇인가요?

이 스킬은 **markdown-viewer/canvas**로, JSON 형식을 사용하여 자유롭게 배치 가능한 노드 기반의 공간 다이어그램을 생성할 수 있는 도구입니다. 개념 지도, 지식 그래프, 기획 보드 등 정밀한 x/y 좌표 제어가 필요한 시각화 작업에 특화되어 있습니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 활용할 수 있으며, 사용자는 JSON 구조로 노드의 위치, 크기, 스타일, 연결 관계를 정의하기만 하면 됩니다. 이를 통해 복잡한 정보 구조를 직관적인 시각적 배치로 표현할 수 있어, 아이디어 브레인스토밍, 프로젝트 로드맵 설계, 시스템 아키텍처 다이어그램 작성 등에 유용합니다. 또한 마크다운 뷰어와의 통합을 통해 AI 에이전트가 생성한 결과물을 즉시 시각화할 수 있어, 개발자와 기획자 모두에게 효율적인 협업 환경을 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/canvas

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

canvas은(는) 무엇을 하나요?

JSON 형식으로 자유롭게 배치된 노드를 사용하여 공간 다이어그램을 생성합니다. 개념 지도, 지식 그래프, 정확한 x/y 좌표 제어가 필요한 기획 보드에 최적입니다.

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

markdown-viewer/archimate

Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.

markdown-viewer/architecture

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

markdown-viewer/bpmn

Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.

markdown-viewer/cloud

Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.

markdown-viewer/data-analytics

Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.

markdown-viewer/graphviz

Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.

markdown-viewer/infocard

Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.

markdown-viewer/iot

Create IoT architecture diagrams using PlantUML syntax with device and sensor stencil icons. Best for smart home, industrial IoT (IIoT), fleet management, edge computing, and sensor network layouts.

markdown-viewer/mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/network

Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.

markdown-viewer/security

Create security architecture diagrams using PlantUML syntax with identity, encryption, firewall, and compliance stencil icons. Best for IAM flows, zero-trust models, encryption pipelines, and threat detection architectures.

markdown-viewer/uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

markdown-viewer/vega

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

관련 스킬