Communitygithub.com

markdown-viewer/network

PlantUML 구문과 mxgraph 장치 아이콘(Cisco, Citrix 등)을 사용하여 네트워크 토폴로지 다이어그램을 생성합니다. LAN/WAN 레이아웃, 데이터센터 상호 연결, 물리적/논리적 네트워크 설계에 가장 적합합니다.

network란 무엇인가요?

이 스킬은 개발자와 네트워크 엔지니어가 Markdown 환경 내에서 직접 전문적인 네트워크 토폴로지 다이어그램을 만들 수 있도록 설계되었습니다. PlantUML 구문과 함께 Cisco, Citrix와 같은 공급업체의 mxgraph 장치 아이콘 라이브러리를 활용하여 LAN/WAN 레이아웃, 데이터센터 상호 연결, 물리적 및 논리적 네트워크 구성을 시각화할 수 있습니다. 이 스킬은 마크다운 미리보기 확장 프로그램과 통합되어 있어 다이어그램을 문서와 함께 나란히 편집하고 실시간으로 렌더링할 수 있어 설계 검토와 문서화 작업 흐름에 이상적입니다. 내장된 아이콘 세트는 두 라우터를 연결하거나 방화벽, 스위치, 클라우드 게이트웨이를 포함한 복잡한 계층형 네트워크를 표현하는 등 모든 규모의 네트워크 다이어그램에 균일하고 전문적인 외관을 보장합니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/network
원본 보기→모든 스킬 둘러보기

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

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

PlantUML 구문과 mxgraph 장치 아이콘(Cisco, Citrix 등)을 사용하여 네트워크 토폴로지 다이어그램을 생성합니다. LAN/WAN 레이아웃, 데이터센터 상호 연결, 물리적/논리적 네트워크 설계에 가장 적합합니다.

개요

이 스킬은 Markdown 파일에서 직접 PlantUML을 사용하여 네트워크 다이어그램을 만들 수 있도록 합니다. Cisco, Citrix 등 공급업체의 mxgraph 아이콘을 지원하여 전문적인 네트워크 토폴로지 다이어그램을 손쉽게 생성할 수 있습니다.

설치

전제 조건

  • VS Code와 markdown-viewer 확장 프로그램
  • PlantUML 렌더러 (예: plantuml JAR 파일 또는 PlantUML 서버)

설정

  1. markdown-viewer 확장 프로그램이 설치되어 있는지 확인합니다.
  2. PlantUML이 올바르게 설정되었는지 확인합니다 (확장 프로그램 설정에서 plantuml.jar 경로 또는 서버 URL을 구성).

사용법

Markdown 파일에 다음과 같이 PlantUML 코드 블록을 추가합니다:

@startuml
!define osaipuml https://raw.githubusercontent.com/ogsther/osaipuml/master
!include osaipuml/osaipuml.puml

left to right direction

actor "사용자" as user
rectangle

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/canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

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/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.

관련 스킬

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community