Can I customize the visual appearance of the diagrams?

Yes, the renderer supports multiple themes (default, dark, forest, neutral), custom pixel widths, and even external CSS files for advanced styling.

Which terminals are supported for inline image viewing?

The skill natively supports iTerm2 using the imgcat protocol and Ghostty using kitten icat. For other terminals, it provides a fallback to the system's default 'open' command.

What happens if there is a syntax error in my Mermaid code?

If mmdc reports a syntax error, the skill will capture the error message and show it to you so you can fix the code before attempting to re-render.

Do I need to install any external dependencies to use this skill?

Yes, you must have the Mermaid CLI (mmdc) installed on your system. You can install it globally via npm using 'npm install -g @mermaid-js/mermaid-cli'.

Does it automatically update the image when the code changes?

Yes, the skill is configured to automatically re-render and provide a fresh 'View' command every time you modify the Mermaid source code.

Mermaid Diagram Renderer

Name: Mermaid Diagram Renderer
Author: Olshansk

byOlshansk

•

Design Tools

Renders and displays Mermaid diagrams inline within iTerm2 and Ghostty terminals for instant visual feedback.

Mermaid Diagram Renderer is a specialized Claude Code skill designed to streamline the creation and iteration of technical diagrams directly within the command line. It automatically converts Mermaid syntax into high-quality PNG images and provides immediate inline preview commands for compatible terminals like iTerm2 and Ghostty. By eliminating the need for external browser previews, it allows developers to visualize flowcharts, sequence diagrams, and architecture maps as they work, significantly accelerating the documentation and design process through a tight, terminal-based feedback loop.

Key Features

016 GitHub stars

02Automatic inline rendering for iTerm2 (imgcat) and Ghostty (kitten icat) terminals.

03Smart fallback mechanism that uses the system's default image viewer if terminal image protocols are missing.

04Zero-friction iteration that re-renders diagrams immediately after every code modification.

05Customizable rendering options including themes (dark, light, forest), width, and background transparency.

06Comprehensive support for flowcharts, sequence, state, class, ER, and XY charts.

Use Cases

01Visualizing complex system architectures and service dependencies during the initial design phase.

02Debugging database schemas by generating and viewing Entity Relationship diagrams in real-time.

03Iterating on technical documentation diagrams without switching between the terminal and a web browser.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add olshansk/agent-skills mermaid-render

For use in Claude.ai and ChatGPT

Key Features

016 GitHub stars

02Automatic inline rendering for iTerm2 (imgcat) and Ghostty (kitten icat) terminals.

03Smart fallback mechanism that uses the system's default image viewer if terminal image protocols are missing.

04Zero-friction iteration that re-renders diagrams immediately after every code modification.

05Customizable rendering options including themes (dark, light, forest), width, and background transparency.

06Comprehensive support for flowcharts, sequence, state, class, ER, and XY charts.

Use Cases

01Visualizing complex system architectures and service dependencies during the initial design phase.

02Debugging database schemas by generating and viewing Entity Relationship diagrams in real-time.

03Iterating on technical documentation diagrams without switching between the terminal and a web browser.