Markdown Viewer Skills

15 个 AI Agent 图表技能，覆盖 UML、云架构、网络拓扑、安全、企业架构、BPMN、数据管道、IoT、脑图、Vega 图表、Canvas 空间图、信息图、架构图、信息卡。

📦 GitHub 源码 🔌 Markdown Viewer 扩展 🤖 Agent Skills 标准

🌐 PlantUML 类

📐

UML 图 ```plantuml

14 UML 图类型（时序/类/活动/组件/部署等），9500+ mxgraph 图标

Preview

Code

@startuml
skinparam participant {
  BackgroundColor #dae8fc
  BorderColor #6c8ebf
  FontName Arial
}
skinparam sequence {
  ArrowColor #333333
  LifeLineBorderColor #999999
  GroupBackgroundColor #f5f5f5
  GroupBorderColor #cccccc
  DividerBackgroundColor #eeeeee
}
skinparam database {
  BackgroundColor #fff2cc
  BorderColor #d6b656
}

actor "Customer" as customer
box "Frontend" #F5F5F5
  participant "Web Store" as web #96CBFE
end box
box "Backend Services" #F5F5F5
  participant "Order Service" as order #A8D08D
  participant "Payment Service" as payment #A8D08D
  participant "Inventory" as inv #A8D08D
end box
database "Orders DB" as db #F4B183
participant "Email Service" as email #D5A6E6

== Place Order ==

customer -> web : Browse & Add to Cart
activate web
web -> order : POST /orders
activate order

order -> inv : Check stock
activate inv
inv --> order : Stock confirmed
deactivate inv

order -> db : Create order (PENDING)
activate db
db --> order : Order #12345
deactivate db

order --> web : Order created
deactivate order

web --> customer : Show order summary
deactivate web

== Process Payment ==

  [+ 24 more lines]

☁️

云架构图 ```plantuml

AWS/Azure/GCP/阿里云架构图，官方服务图标

Preview

@startuml left to right direction mxgraph.aws4.users "Users" as users mxgraph.aws4.cloudfront "CloudFront" as cf mxgraph.aws4.s3 "S3\n(Static Assets)" as s3 cloud "AWS Cloud" { rectangle "VPC" { rectangle "Public Subnet (AZ-1)" { mxgraph.aws4.application_load_balancer "ALB" as alb } rectangle "Public Subnet (AZ-2)" { mxgraph.aws4.nat_gateway "NAT\nGateway" as nat } rectangle "Private Subnet (AZ-1)" { mxgraph.aws4.ec2 "EC2" as ec2a mxgraph.aws4.ec2 "EC2" as ec2b } rectangle "Private Subnet (AZ-2)" { mxgraph.aws4.rds "RDS\n(Primary)" as rds1 mxgraph.aws4.rds "RDS\n(Standby)" as rds2 } } } users --> cf cf --> s3 cf --> alb alb --> ec2a alb --> ec2b ec2a --> rds1 rds1 ..> rds2 : replication @enduml

@startuml cloud "Internet" as inet mxgraph.cisco.routers.router "Edge Router" as edge_rtr mxgraph.cisco.security.pix_firewall "PIX Firewall" as pix_fw rectangle "DMZ" { mxgraph.cisco.misc.asa_5500 "ASA 5500" as asa mxgraph.cisco.servers.standard_host "Web Server 1" as web1 mxgraph.cisco.servers.standard_host "Web Server 2" as web2 } rectangle "Server Farm" { mxgraph.cisco.switches.layer_3_switch "L3 Switch" as l3sw mxgraph.cisco.servers.standard_host "App Server" as app_srv mxgraph.cisco.servers.storage_server "Storage" as storage } rectangle "WAN" { mxgraph.cisco.routers.router "WAN Router" as wan_rtr cloud "Branch" as branch } rectangle "Campus A" { mxgraph.cisco.switches.workgroup_switch "Switch A" as sw_a mxgraph.cisco.misc.access_point "AP" as ap_a mxgraph.cisco.hubs_and_gateways.100baset_hub "Hub" as hub_a } rectangle "Campus B" { mxgraph.cisco.switches.workgroup_switch "Switch B" as sw_b mxgraph.cisco.misc.access_point "AP" as ap_b mxgraph.cisco.hubs_and_gateways.100baset_hub "Hub" as hub_b } inet -- edge_rtr edge_rtr -- pix_fw pix_fw -- asa pix_fw -- l3sw pix_fw -- wan_rtr asa -- web1 asa -- web2 l3sw -- app_srv l3sw -- storage wan_rtr -- branch l3sw -- sw_a l3sw -- sw_b sw_a -- ap_a sw_a -- hub_a sw_b -- ap_b sw_b -- hub_b @enduml

@startuml left to right direction mxgraph.aws4.users "Client\nApp" as client rectangle "Identity Verification" { mxgraph.aws4.cognito "Cognito\n(MFA)" as auth mxgraph.aws4.identity_and_access_management "IAM\nPolicy" as iam } rectangle "Network Micro-segmentation" { mxgraph.aws4.network_firewall "Network\nFirewall" as nfw mxgraph.aws4.api_gateway "API\nGateway" as apigw } rectangle "Protected Service" { mxgraph.aws4.lambda_function "Service\nLambda" as fn mxgraph.aws4.key_management_service "KMS\nEncryption" as kms mxgraph.aws4.encrypted_data "Encrypted\nData" as enc } mxgraph.aws4.cloudtrail "Audit\nLog" as trail client --> auth : "MFA login" auth --> iam : "JWT + role" iam --> nfw : "signed request" nfw --> apigw apigw --> fn fn --> kms : "decrypt" kms --> enc fn ..> trail : "audit" apigw ..> trail : "audit" @enduml

@startuml !include <archimate/Archimate> rectangle "Business Layer" { Business_Actor(customer, "Customer") Business_Actor(agent, "Claims Agent") Business_Process(submit, "Submit Claim") Business_Process(assess, "Assess Claim") Business_Process(pay, "Process Payment") Business_Service(claimSvc, "Claims Service") Business_Service(paySvc, "Payment Service") } rectangle "Application Layer" { Application_Component(claimApp, "Claims System") Application_Component(crmApp, "CRM System") Application_Component(finApp, "Finance System") Application_Service(claimAPI, "Claims API") Application_Service(custAPI, "Customer API") Application_Service(payAPI, "Payment API") Application_DataObject(claimData, "Claim Record") Application_DataObject(custData, "Customer Profile") } rectangle "Technology Layer" { Technology_Node(appSrv, "Application Server") Technology_Node(webSrv, "Web Server") Technology_Device(dbSrv, "Database Server") Technology_CommunicationNetwork(lan, "Corporate LAN") } Rel_Triggering(customer, submit, "files claim") Rel_Assignment(agent, assess, "investigates") Rel_Triggering(submit, assess, "") Rel_Triggering(assess, pay, "") Rel_Realization(submit, claimSvc, "") Rel_Realization(pay, paySvc, "") Rel_Serving(claimAPI, claimSvc, "") Rel_Serving(custAPI, claimSvc, "") Rel_Serving(payAPI, paySvc, "") Rel_Realization(claimApp, claimAPI, "") Rel_Realization(crmApp, custAPI, "") Rel_Realization(finApp, payAPI, "") Rel_Access(claimApp, claimData, "") Rel_Access(crmApp, custData, "") Rel_Assignment(appSrv, claimApp, "") Rel_Assignment(appSrv, finApp, "") Rel_Assignment(webSrv, crmApp, "") Rel_Serving(dbSrv, appSrv, "") Rel_Association(lan, appSrv, "") Rel_Association(lan, webSrv, "") Rel_Association(lan, dbSrv, "") @enduml

@startuml left to right direction mxgraph.bpmn.event.start "Order\nReceived" as start rectangle "Validate\nPayment" as validate mxgraph.bpmn.gateway2.exclusive "Payment\nOK?" as gw_pay rectangle "Che

@startuml left to right direction mxgraph.bpmn.event.start "Order\nReceived" as start rectangle "Validate\nPayment" as validate mxgraph.bpmn.gateway2.exclusive "Payment\nOK?" as gw_pay rectangle "Check\nInventory" as inv_check mxgraph.bpmn.gateway2.exclusive "In\nStock?" as gw_stock rectangle "Reserve\nItems" as reserve mxgraph.bpmn.gateway2.parallel "Fork" as fork rectangle "Ship\nOrder" as ship rectangle "Send\nConfirmation" as notify mxgraph.bpmn.gateway2.parallel "Join" as join rectangle "Complete\nOrder" as complete mxgraph.bpmn.event.end "Done" as end_ok rectangle "Reject\nPayment" as reject_pay mxgraph.bpmn.event.errorEnd "Payment\nFailed" as end_pay rectangle "Backorder" as backorder mxgraph.bpmn.event.timerCatching "Wait for\nRestock" as timer rectangle "Retry\nInventory" as retry start --> validate validate --> gw_pay gw_pay --> inv_check : "Valid" gw_pay --> reject_pay : "Invalid" reject_pay --> end_pay inv_check --> gw_stock gw_stock --> reserve : "Yes" gw_stock --> backorder : "No" backorder --> timer timer --> retry retry --> gw_stock reserve --> fork fork --> ship fork --> notify ship --> join notify --> join join --> complete complete --> end_ok @enduml

@startuml left to right direction rectangle "Data Sources" { mxgraph.aws4.rds "App DB\n(RDS)" as rds mxgraph.aws4.dynamodb "User Events\n(DynamoDB)" as ddb mxgraph.aws4.s3 "Log Files\n(S3)" as logs } rectangle "Ingestion" { mxgraph.aws4.glue "Glue\nETL Jobs" as glue mxgraph.aws4.glue_crawlers "Glue\nCrawlers" as crawlers } rectangle "Data Lake" { mxgraph.aws4.lake_formation "Lake\nFormation" as lf mxgraph.aws4.s3 "Data Lake\n(S3)" as lake mxgraph.aws4.glue_data_catalog "Data\nCatalog" as catalog } rectangle "Query & Analytics" { mxgraph.aws4.athena "Athena" as athena mxgraph.aws4.redshift "Redshift\nSpectrum" as rs mxgraph.aws4.quicksight "QuickSight" as qs } rds --> glue ddb --> glue logs --> glue glue --> lake crawlers --> catalog lake --> lf : "govern" lf --> athena lf --> rs athena --> qs rs --> qs @enduml

@startuml left to right direction rectangle "Production Line A" { mxgraph.aws4.iot_thing_temperature_sensor "Temp\nSensor" as ts1 mxgraph.aws4.iot_thing_vibration_sensor "Vibration\nSensor" as vs1 mxgraph.aws4.iot_thing_plc "PLC" as plc1 } rectangle "Production Line B" { mxgraph.aws4.iot_thing_temperature_sensor "Temp\nSensor" as ts2 mxgraph.aws4.iot_thing_industrial_pc "Industrial\nPC" as ipc } rectangle "Edge Layer" { mxgraph.aws4.greengrass "Greengrass\nEdge" as gg mxgraph.aws4.iot_greengrass_stream_manager "Stream\nManager" as sm } rectangle "Cloud Platform" { mxgraph.aws4.iot_core "IoT Core" as core mxgraph.aws4.iot_sitewise "SiteWise" as sw mxgraph.aws4.iot_analytics "IoT\nAnalytics" as analytics mxgraph.aws4.iot_events "IoT\nEvents" as events } ts1 --> gg : MQTT vs1 --> gg : MQTT plc1 --> gg : OPC-UA ts2 --> gg ipc --> gg gg --> sm sm --> core core --> sw core --> analytics core --> events @enduml

{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ { "cat": "PlantUML", "skill": "uml", "n": 14, "color": "#58a6ff" }, { "cat": "PlantUML", "skill": "cloud", "n": 8, "color": "#79c0ff" }, { "cat": "PlantUML", "skill": "network", "n": 9, "color": "#a5d6ff" }, { "cat": "PlantUML", "skill": "security", "n": 7, "color": "#7ee787" }, { "cat": "PlantUML", "skill": "archimate", "n": 8, "color": "#56d364" }, { "cat": "PlantUML", "skill": "bpmn", "n": 8, "color": "#3fb950" }, { "cat": "PlantUML", "skill": "data-analytics", "n": 8, "color": "#d2a8ff" }, { "cat": "PlantUML", "skill": "iot", "n": 7, "color": "#bc8cff" }, { "cat": "PlantUML", "skill": "mindmap", "n": 6, "color": "#ff7b72" }, { "cat": "PlantUML", "skill": "graphviz", "n": 5, "color": "#ffa657" }, { "cat": "Standalone", "skill": "vega", "n": 10, "color": "#ffd866" }, { "cat": "Standalone", "skill": "canvas", "n": 6, "color": "#e3b341" }, { "cat": "Standalone", "skill": "infographic", "n": 70, "color": "#f0883e" }, { "cat": "HTML", "skill": "architecture", "n": 156, "color": "#db6d28" }, { "cat": "HTML", "skill": "infocard", "n": 182, "color": "#bd561d" } ] }, "title": "Example Count per Skill", "width": 600, "height": 280, "mark": { "type": "bar", "cornerRadiusEnd": 4 }, "encoding": { "x": { "field": "skill", "type": "nominal", "title": "Skill", "axis": { "labelAngle": -30, "labelFontSize": 11 } }, "y": { "field": "n", "type": "quantitative", "title": "Example Count" }, "color": { "field": "cat", "type": "nominal", "title": "Category" } } }

{ "nodes": [ { "id": "root", "type": "text", "x": 260, "y": 10, "width": 280, "height": 55, "text": "🎯 Product Strategy Q4 2025" }, { "id": "g1", "type": "group", "x": 0, "y": 90, "width": 250, "height": 260, "color": "2", "label": "🔵 Core Platform" }, { "id": "n1", "type": "text", "x": 12, "y": 118, "width": 226, "height": 46, "text": "**AI Features**\nLLM + RAG pipeline" }, { "id": "n2", "type": "text", "x": 12, "y": 178, "width": 226, "height": 46, "text": "**API Gateway**\nREST + WebSocket" }, { "id": "n3", "type": "text", "x": 12, "y": 238, "width": 226, "height": 46, "text": "**Data Layer**\nPostgreSQL + Redis" }, { "id": "g2", "type": "group", "x": 290, "y": 90, "width": 250, "height": 260, "color": "4", "label": "🟡 Growth" }, { "id": "n4", "type": "text", "x": 302, "y": 118, "width": 226, "height": 46, "text": "**Mobile Apps**\niOS + Android" }, { "id": "n5", "type": "text", "x": 302, "y": 178, "width": 226, "height": 46, "text": "**Analytics**\nUsage dashboards" }, { "id": "n6", "type": "text", "x": 302, "y": 238, "width": 226, "height": 46, "text": "**Billing**\nSubscription mgmt" }, { "id": "g3", "type": "group", "x": 580, "y": 90, "width": 250, "height": 260, "color": "6", "label": "🟣 Enterprise" }, { "id": "n7", "type": "text", "x": 592, "y": 118, "width": 226, "height": 46, "text": "**SSO / SAML**\nEnterprise identity" }, { "id": "n8", "type": "text", "x": 592, "y": 178, "width": 226, "height": 46, "text": "**Audit Logs**\nCompliance ready" }, { "id": "n9", "type": "text", "x": 592, "y": 238, "width": 226, "height": 46, "text": "**SLA 99.99%**\nHigh availability" } ], "connections": [] }

infographic list-grid-badge-card data title Key Metrics desc Annual performance overview items - label Total Revenue desc $12.8M | YoY +23.5% icon mdi/currency-usd - label New Customers desc 3,280 | YoY +45% icon mdi/account-plus - label Satisfaction desc 94.6% | Industry leading icon mdi/emoticon-happy - label Market Share desc 18.5% | Rank #2 icon mdi/trophy