Community画像github.com

zc277584121/mermaid-to-image

Markdownファイル内のMermaidコードブロックをmermaid.ink APIを使ってPNG画像に変換します。

mermaid-to-image とは?

このスキルは、Markdownファイルに埋め込まれたMermaid図のコードブロックを、自動的にPNG画像に変換するためのツールです。mermaid.ink APIを利用することで、複雑なダイアグラムを手動でレンダリングする手間を省き、ドキュメントの可視性と保守性を向上させます。主にClaude CodeなどのAIエージェント向けに設計されており、ワークフローの中で動的に図を生成・更新できます。開発者は、Markdownファイル内のMermaid記法をそのまま記述するだけで、画像化されたダイアグラムをドキュメントに埋め込むことが可能になります。

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

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

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

mermaid-to-image は何をしますか?

Markdownファイル内のMermaidコードブロックをmermaid.ink APIを使ってPNG画像に変換します。

概要

このスキルは、Markdown文書内で記述されたMermaid図を解析し、対応するPNG画像を生成します。画像はmermaid.ink APIを通じてレンダリングされ、元のコードブロックと置き換えられます。

使用方法

  1. MarkdownファイルにMermaidコードブロックを記述します。
  2. このスキルを実行すると、各コードブロックが画像に変換されます。
  3. 変換後の画像は指定された出力ディレクトリに保存されます。

例

入力(Markdownファイル):

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

出力:

画像ファイルが生成され、Markdown内の参照が更新されます。

設定

  • MERMAID_INK_URL: mermaid.ink APIのエンドポイント(デフォルト: https://mermaid.ink)
  • OUTPUT_DIR: 生成された画像の出力先ディレクトリ(デフォルト: ./images)
  • IMAGE_FORMAT: 出力画像の形式(デフォルト: png)

依存関係

  • curlまたは同等のHTTPクライアント
  • Markdownパーサー(スキル内で使用)

注意事項

  • Mermaidコードブロックは、言語指定が mermaid である必要があります。
  • 画像生成には外部APIへのアクセスが必要です。
  • 大量の図を変換する場合は、APIレート制限に注意してください。

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.

関連スキル