CommunityBildgithub.com

zc277584121/mermaid-to-image

Konvertiert Mermaid-Codeblöcke in Markdown-Dateien in PNG-Bilder mithilfe der mermaid.ink-API.

Was ist mermaid-to-image?

Diese Fähigkeit ermöglicht es einem KI-Agenten, Mermaid-Diagramme, die in Markdown-Dateien als fenced code blocks gekapselt sind, automatisch in PNG-Bilder zu konvertieren. Sie nutzt die öffentliche mermaid.ink-API, um die Diagrammrendering durchzuführen, und ersetzt dann die Mermaid-Codeblöcke im Markdown durch standardisierte Markdown-Bildverweise (`![diagram](...png)`). Dies ist besonders nützlich für Entwickler, die technische Dokumentation oder Projekt-Wikis pflegen und sicherstellen möchten, dass Diagramme in gerenderten Umgebungen (wie GitHub, GitLab oder anderen Markdown-Viewern) korrekt und ohne zusätzliche Client-seitige Skripte angezeigt werden. Die Fähigkeit unterstützt CLI-basierte Workflows und kann in CI/CD-Pipelines oder manuelle Dokumentationsaufgaben integriert werden. Der Benutzer muss lediglich eine Markdown-Datei mit einem gültigen Mermaid-Codeblock bereitstellen, und der Agent verarbeitet den gesamten Konvertierungsprozess, einschließlich API-Aufrufen und Markdown-Updates.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/zc277584121/marketing-skills/tree/main/skills/mermaid-to-image

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.

Vorschau

Aus dem Skill-README

Mermaid-Diagramm
Mermaid-Diagramm

Dokumentation

Was macht mermaid-to-image?

Konvertiert Mermaid-Codeblöcke in Markdown-Dateien in PNG-Bilder mithilfe der mermaid.ink-API.

Funktionsweise

  1. Liest eine Markdown-Datei und erkennt alle mit ````mermaid` gekennzeichneten Codeblöcke ein.
  2. Sendet den Inhalt jedes Mermaid-Codeblocks an die https://mermaid.ink/api-API, um ein PNG-Bild zu generieren.
  3. Ersetzt den ursprünglichen Codeblock im Markdown durch einen Bildverweis, z. B. ![Mermaid-Diagramm](generated-diagram.png).

Voraussetzungen

  • cURL: Für API-Aufrufe erforderlich.
  • JQ: Wird zur JSON-Verarbeitung verwendet, falls nötig.
  • Bash 4.0+: Aufgrund der Verwendung von readarray und anderen Bash-Erweiterungen.

Verwendung

./mermaid-to-image.sh <markdown-datei.md>

Beispiel

Angenommen, Sie haben eine Datei dokumentation.md mit folgendem Inhalt:

# Flussdiagramm

```mermaid
graph TD
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Ende]
    B -->|Nein| D[Wiederholen]
```

Führen Sie das Skript aus:

./mermaid-to-image.sh dokumentation.md

Die resultierende dokumentation.md wird dann wie folgt aussehen:

# Flussdiagramm

![Mermaid-Diagramm](dokumentation_diagram_1.png)

Optionen

  • -o, --output <verzeichnis>: Legt das Ausgabeverzeichnis für die generierten PNG-Dateien fest (Standard: aktuelles Verzeichnis).
  • -h, --help: Zeigt diese Hilfe an.

Ausgabe

  • Generierte PNG-Dateien werden im aktuellen Verzeichnis (oder im angegebenen Ausgabeverzeichnis) abgelegt.
  • Die ursprüngliche Markdown-Datei wird direkt aktualisiert (Vorhandensein eines Backups wird empfohlen).

Grenzen

  • Die mermaid.ink-API kann je nach Komplexität des Diagramms eine leichte Verzögerung aufweisen.
  • Alle generierten Bilder werden vor Ort gespeichert; es erfolgt kein externes Hosting.
  • Wenn die API nicht erreichbar ist (z. B. bei Netzwerkproblemen), wird der Vorgang abgebrochen.

Lizenz

MIT

Individual skills in this repo

This repo contains 12 individual skills — each has its own dedicated page.

zc277584121/browser-screenshot

Take focused, region-specific screenshots from web pages. Navigates to the right page based on user context (URL, search query, social media post), locates the target region via DOM selectors, and crops to a clean, focused screenshot.

zc277584121/chrome-automation

Automate Chrome browser tasks using agent-browser CLI. Navigate pages, fill forms, click buttons, take screenshots, extract data, and replay recorded workflows — all inside the user's real Chrome session.

zc277584121/content-rewrite

Adapt and rewrite content for different platforms (LinkedIn, X, Reddit, English blog, WeChat). Each platform has its own tone, format, and length requirements.

zc277584121/github-traffic

Fetch, store, and visualize GitHub repository traffic data (views, clones, referrers, stars) with trend charts. Requires repo push access.

zc277584121/image-generation

Generate illustration images for articles and documentation with a Codex-first workflow, OpenAI API fallback, and Gemini fallback.

zc277584121/jupyter-notebook-writing

Write Milvus application-level Jupyter notebook examples using a Markdown-first workflow with jupyter-switch for format conversion.

zc277584121/md-to-feishu

Convert local Markdown files to Feishu (Lark) documents with automatic image uploading. Uses the feishu-docx CLI tool.

zc277584121/mermaid-to-gif

Convert Mermaid code blocks in .mmd or .md files to animated GIFs with customizable animation styles (progressive, highlight walk, pulse flow, wave).

zc277584121/raw-video-processing

Post-process raw screen recordings by removing silent segments and applying speed adjustments. Uses FFmpeg-based Python scripts to optimize video pacing automatically.

zc277584121/remove-ai-style

Review and adjust writing style to reduce AI-generated patterns, making text read more naturally and human-like. Supports Chinese and English.

zc277584121/screenshot-compression

Compress PNG and JPEG screenshots in place using pngquant and jpegoptim, keeping the original format for maximum compatibility.

zc277584121/video-to-gif

Convert a video to multiple GIF variants with different quality/size tradeoffs. Generates a comparison set so the user can visually pick the best result.

Verwandte Skills