Communitygithub.com

markdown-viewer/network

使用PlantUML语法和mxgraph设备图标（Cisco、Citrix等）创建网络拓扑图。适用于LAN/WAN布局、数据中心互连以及物理/逻辑网络设计。

network 是什么？

markdown-viewer/network 是一个专为开发者设计的AI Agent技能，用于在Markdown文档中直接创建专业的网络拓扑图。它利用PlantUML语法和丰富的mxgraph设备图标库（包括Cisco、Citrix等主流网络设备），使用户能够轻松绘制LAN/WAN布局、数据中心互连以及物理或逻辑网络架构图。该技能支持通过简单的文本描述生成复杂图表，无需手动拖拽或使用专门的绘图工具。它适用于Claude Code、Cursor等支持Markdown渲染的AI助手平台，能够显著提升网络设计与文档编写的效率。其工作原理基于解析用户提供的PlantUML代码块，并自动将其渲染为可视化拓扑图，同时保留原始代码以便后续修改。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/network
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

network 是做什么的？

使用PlantUML语法和mxgraph设备图标（Cisco、Citrix等）创建网络拓扑图。适用于LAN/WAN布局、数据中心互连以及物理/逻辑网络设计。

用法示例

@startuml
!include <office/2014>
!include <networking/2014>

skinparam backgroundColor #FFFFFF

rectangle "数据中心" as dc {
  EQUIPMENT "Cisco路由器" as router
  EQUIPMENT "Cisco交换机" as switch1
  EQUIPMENT "Cisco交换机" as switch2
  CLOUD "云服务" as cloud
}

rectangle "办公室" as office {
  COMPUTER "员工PC1" as pc1
  COMPUTER "员工PC2" as pc2
  EQUIPMENT "无线AP" as ap
}

dc .> office : 互联网连接

@enduml

支持的图标

  • Cisco: 路由器、交换机、防火墙、无线控制器
  • Citrix: 应用程序服务器、桌面虚拟化
  • 通用: 云、服务器、数据库、负载均衡器

平台兼容性

  • Claude Code
  • Cursor
  • 支持PlantUML渲染的任何Markdown编辑器

使用提示

  • 使用!include指令加载图标库
  • 通过EQUIPMENT、COMPUTER、CLOUD等关键字指定设备类型
  • 使用箭头符号标注连接关系

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