CommunityBildgithub.com

markdown-viewer/vega

Erstelle datengesteuerte Diagramme mit Vega-Lite (deklarativ) und Vega (programmatisch). Ideal für statistische Visualisierungen numerischer Daten – Balken-, Linien-, Punkt-, Heatmap-, Flächen-, Radar-Diagramme und Wortwolken.

Was ist vega?

Der Skill `markdown-viewer/vega` ermöglicht es KI-Agenten, datengesteuerte Diagramme direkt im Markdown-Kontext zu erstellen und anzuzeigen. Er unterstützt sowohl den deklarativen Ansatz von Vega-Lite für schnelle, konfigurationsbasierte Visualisierungen als auch den programmatischen Ansatz von Vega für komplexere, interaktive Diagramme. Besonders geeignet ist dieser Skill für die statistische Visualisierung numerischer Daten, darunter Balken-, Linien-, Punkt-, Heatmap-, Flächen-, Radar-Diagramme und Wortwolken. Er funktioniert nahtlos in Umgebungen wie Claude Code, Cursor und anderen Markdown-basierten Tools, indem er die Spezifikationen in gerenderte Grafiken umwandelt, ohne dass zusätzliche Abhängigkeiten erforderlich sind. Der Skill ist nützlich für Datenanalyse-Berichte, Dashboards und jede Situation, in der komplexe Daten schnell visuell dargestellt werden müssen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/vega

Installed? Explore more Bild skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht vega?

Erstelle datengesteuerte Diagramme mit Vega-Lite (deklarativ) und Vega (programmatisch). Ideal für statistische Visualisierungen numerischer Daten – Balken-, Linien-, Punkt-, Heatmap-, Flächen-, Radar-Diagramme und Wortwolken.

Verwendung

Verwende Codeblöcke mit der Markdown-Sprachkennung vega-lite oder vega, um Diagramme zu definieren:

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Ein einfaches Balkendiagramm",
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

Unterstützte Diagrammtypen

  • Balkendiagramm: "mark": "bar"
  • Liniendiagramm: "mark": "line"
  • Punktdiagramm: "mark": "point"
  • Heatmap: "mark": "rect"
  • Flächendiagramm: "mark": "area"
  • Radar-Diagramm: Verwendung mit abgeleiteten Koordinaten
  • Wortwolke: Verwendung mit benutzerdefinierten Transformationen

Plattformen

Dieser Skill funktioniert in jeder Umgebung, die Markdown mit Codeblock-Rendering unterstützt, z. B. Claude Code, Cursor und andere KI-gestützte Editoren.

Referenzen

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

Verwandte Skills