🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Markdown Diagram Renderer
πŸ¦€ ClawHub

Markdown Diagram Renderer

by @fireium

Automatically identify diagram code blocks (Mermaid/Graphviz/PlantUML) in Markdown documents, render them as images, and replace them.

Versionv1.0.3
Downloads945
Stars⭐ 1
#legal#automation
TERMINAL
clawhub install markdown-diagram-renderer

πŸ“– About This Skill

name: md-diagram-renderer description: Automatically identify diagram code blocks (Mermaid/Graphviz/PlantUML) in Markdown documents, render them as images, and replace them. user-invocable: true metadata: {"openclaw": {"requires": {"bins": ["python3"], "env": []}, "optional": {"bins": ["mmdc", "java", "dot"], "env": ["PLANTUML_JAR"]}, "emoji": "πŸ“Š"}}

Markdown Diagram Renderer

Automatically identify architecture/flowchart code blocks in Markdown documents, render them as images, and replace them.

Features

  • Smart Identification: Automatically identify Mermaid, Graphviz, and PlantUML diagrams without specific language tags.
  • Multi-backend Rendering: Supports local rendering and online API fallback.
  • Base64 Inline: Images are inlined into Markdown as Base64 encoding, version control friendly.
  • Source Preservation: Optionally keep the original diagram code as comments.

    • Supported Diagram Types

    | Diagram Type | Language Identifier | Local Renderer | Online Renderer | |---------|---------|---------|---------| | Mermaid | mermaid, mmd | mmdc CLI | mermaid.ink | | Graphviz | graphviz, dot, gv | graphviz Python | - | | PlantUML | plantuml, puml | Java jar | plantuml.com |

    Getting Started

    Before first use, please install Python dependencies:

    # Install dependencies
pip install -r {baseDir}/script/requirements.txt

    Optional dependencies (install as needed):

    # Mermaid local rendering (recommended)
npm install -g @mermaid-js/mermaid-cli
    Graphviz (for Graphviz diagrams)
    

    macOS: brew install graphviz
    

    Ubuntu: sudo apt-get install graphviz
    PlantUML local rendering
    

    1. Install Java
    

    2. Download plantuml.jar
    

    3. Set environment variable: export PLANTUML_JAR=/path/to/plantuml.jar

    > Note: If local rendering tools are not installed, the system will automatically use online APIs for rendering (requires internet connection). > > ⚠️ Privacy Warning: Online rendering sends diagram source code to third-party services: > - Mermaid β†’ mermaid.ink > - PlantUML β†’ plantuml.com > > Do not include sensitive information (e.g., passwords, keys, internal architecture details) in diagrams. It is recommended to install local rendering tools to avoid data leakage.

    Usage

    CLI Command Line

    # Basic usage
python3 {baseDir}/script/main.py document.md
    Specify output file
    
python3 {baseDir}/script/main.py document.md -o output.md
    Set confidence threshold
    
python3 {baseDir}/script/main.py document.md --threshold 0.7
    Output SVG format
    
python3 {baseDir}/script/main.py document.md --format svg
    Do not preserve source code
    
python3 {baseDir}/script/main.py document.md --no-preserve
    Detailed logs
    
python3 {baseDir}/script/main.py document.md -v

    Calling as a Python Module

    import sys
sys.path.insert(0, '{baseDir}/script')
    from main import create_skill
    Create SKILL instance
    
config = {
    'confidence_threshold': 0.6,
    'output_format': 'png',
    'preserve_source': True,
}
skill = create_skill(config)
    Execute
    
result = skill.execute(
    input_file='document.md',
    output_file='output.md'
)
    print(result)

    Configuration Parameters

    | Parameter | Type | Default | Description | |-----|------|-------|------| | confidence_threshold | float | 0.6 | Diagram identification confidence threshold (0-1) | | output_format | string | png | Output image format (png/svg) | | preserve_source | bool | True | Whether to preserve original diagram code |

    Identification Strategy

    Uses a multi-stage filter system:

    1. Language Tag Check: Prioritizes identifying mermaid, graphviz, plantuml, etc. 2. First Line Keyword Matching: Checks for typical declarations at the beginning of code blocks. 3. Keyword Density Analysis: Counts the frequency of diagram-specific keywords. 4. Structural Feature Analysis: Detects structural characteristics of diagrams.

    Output Example

    Before processing:

    mermaid graph TD A[Start] --> B[Process] B --> C[End]

    After processing: 

    !mermaid diagram
    
 B[Process]
    B --> C[End]

    -->

    File Structure
    {baseDir}/
β”œβ”€β”€ SKILL.md           # This file
β”œβ”€β”€ script/
β”‚   β”œβ”€β”€ main.py        # Main entry point
β”‚   β”œβ”€β”€ core.py        # Core logic
β”‚   └── requirements.txt  # Python dependencies
└── README.md          # Detailed documentation

    πŸ’‘ Examples

    CLI Command Line

    # Basic usage
python3 {baseDir}/script/main.py document.md
    Specify output file
    
python3 {baseDir}/script/main.py document.md -o output.md
    Set confidence threshold
    
python3 {baseDir}/script/main.py document.md --threshold 0.7
    Output SVG format
    
python3 {baseDir}/script/main.py document.md --format svg
    Do not preserve source code
    
python3 {baseDir}/script/main.py document.md --no-preserve
    Detailed logs
    
python3 {baseDir}/script/main.py document.md -v

    Calling as a Python Module

    import sys
sys.path.insert(0, '{baseDir}/script')
    from main import create_skill
    Create SKILL instance
    
config = {
    'confidence_threshold': 0.6,
    'output_format': 'png',
    'preserve_source': True,
}
skill = create_skill(config)
    Execute
    
result = skill.execute(
    input_file='document.md',
    output_file='output.md'
)
    print(result)