Communitygithub.com

JonasJoe233/claude-skill-svg-arch-diagram

Claude Code-Fertigkeit: Wandelt Text/Dokumente/Bilder in SVG-Architekturdiagramme um und exportiert PNG

Was ist claude-skill-svg-arch-diagram?

Diese Fertigkeit ermöglicht es Claude Code, aus Textbeschreibungen, Dokumenten oder vorhandenen Bildern saubere SVG-Architekturdiagramme zu generieren und diese auch als PNG zu exportieren. Sie ist besonders nützlich für Entwickler:innen, die schnell visuelle Darstellungen von Systemarchitekturen, Netzwerktopologien oder Softwarekomponenten benötigen, ohne manuell Zeichenwerkzeuge bedienen zu müssen. Die Fertigkeit unterstützt die Extraktion relevanter Informationen aus verschiedenen Eingabeformaten (z. B. Markdown-Dokumente, technische Spezifikationen oder Screenshots) und erstellt daraus ein strukturiertes SVG-Diagramm. Das exportierte PNG-Format erleichtert die Einbindung in Präsentationen, Dokumentationen oder Wikis. Die Fertigkeit ist als Skill für Claude Code konzipiert und arbeitet eng mit dem Sprachmodell zusammen, um aus unstrukturierten Beschreibungen konsistente und lesbare Diagramme zu erzeugen.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add JonasJoe233/claude-skill-svg-arch-diagram
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht claude-skill-svg-arch-diagram?

Claude Code-Fertigkeit: Wandelt Text/Dokumente/Bilder in SVG-Architekturdiagramme um und exportiert PNG

Beschreibung

Diese Fertigkeit ermöglicht es Claude Code, aus Textbeschreibungen, technischen Dokumenten oder vorhandenen Bildern professionelle SVG-Architekturdiagramme zu generieren. Zusätzlich kann das Ergebnis als PNG-Datei exportiert werden.

Funktionsweise

  1. Eingabe: Der Benutzer stellt Text, ein Dokument (z. B. Markdown) oder ein Bild zur Verfügung, das die zu visualisierende Architektur beschreibt.
  2. Analyse: Claude Code analysiert die Eingabe und extrahiert relevante Komponenten, Verbindungen und Beziehungen.
  3. Generierung: Die Fertigkeit erstellt auf Basis der Analyse ein klares, strukturiertes SVG-Diagramm.
  4. Export: Optional kann das Diagramm als PNG-Datei exportiert werden.

Verwendung

# Beispiel: Aus Text ein Diagramm erstellen
Claude, erstelle ein SVG-Architekturdiagramm aus folgender Beschreibung:

[Eingabe: Beschreibung der Architektur]

# Oder aus einem Dokument
Claude, erstelle ein SVG-Diagramm aus der Datei system.md und exportiere es als PNG.

Voraussetzungen

  • Claude Code (installiert und konfiguriert)
  • Node.js (für die SVG/PNG-Konvertierung)
  • Optional: Bildbearbeitungsprogramm zum Nachbearbeiten

Unterstützte Plattformen

  • Claude Code (CLI)

Lizenz

MIT

Verwandte Skills

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