Agent skill

Mermaid Rasterize

Rasterize specific mermaid blocks inside a markdown file into PNG images.

GPL-3.0Auto-check passedDevelopment

Install Mermaid Rasterize

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .claude/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .claude/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .agents/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .agents/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .cursor/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .cursor/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/JocysCom/FocusLogger.git --path .ai/skills/mermaid-rasterize

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .gemini/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .gemini/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .github/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .github/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .github/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install JocysCom/FocusLogger mermaid-rasterize --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/JocysCom/FocusLogger.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.ai/skills/mermaid-rasterize .opencode/skills/mermaid-rasterize && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "mermaid-rasterize" agent skill from https://github.com/JocysCom/FocusLogger/tree/main/.ai/skills/mermaid-rasterize into .opencode/skills/mermaid-rasterize/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "mermaid-rasterize", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: mermaid-rasterize
GitHub stars: 213
Token cost: ~835 tokens
SKILL.md length: 302 words
Files: 1
Skills in repo: 7
Repo updated: Jun 30, 2026
First seen: Oct 7, 2026
Licence: GPL-3.0

At a glance

Rasterize specific mermaid blocks inside a markdown file into PNG images.

Works in 7 steps: Resolve inputs from context — avoid… → Install mmdc → Detect asset folder (only if not already… → …
Mermaid diagrams dont render in the target viewer (GitHub
SKILL.md covers 0. Resolve inputs from context…, 1. Install mmdc, 2. Detect asset folder (only… and 3. Name each diagram, plus 4 more sections
Calls npm

What it does

Mermaid Rasterize is an agent skill from JocysCom/FocusLogger. Rasterize specific mermaid blocks inside a markdown file into PNG images. Use when mermaid diagrams don't render in the target viewer (GitHub, Notion, PDF, etc.). Triggers on: rasterize diagrams, mermaid isn't rendering, convert mermaid to images, replace mermaid blocks with images.

Its SKILL.md is about 840 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Mermaid, GitHub and Notion. The repository describes itself as: Find out which process or program is taking the window focus. In-game controls could temporary stop responding if other program steals the focus. The licence is GPL-3.0.

When your agent uses it

Mermaid diagrams dont render in the target viewer (GitHub
: rasterize diagrams
Mermaid isnt rendering
Convert mermaid to images

Example prompts

“/mermaid-rasterize”

Requirements

Node.js

Workflow steps

7 steps, taken from the step headings in SKILL.md.

Resolve inputs from context — avoid redundant reads
Install mmdc
Detect asset folder (only if not already known)
Name each diagram
Extract, save, and convert
Rewrite the markdown
Present outputs

What it can do on your machine

Read from SKILL.md and the folder at commit b32c096. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
- mermaid.live
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Mermaid Rasterize loads about 835 tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 302 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~75
When it runs · the whole SKILL.md, loaded when a task matches: ~835

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from JocysCom/FocusLogger at commit b32c096, republished under its GPL-3.0 licence (© JocysCom). 302 words, ~835 tokens.

Download SKILL.mdSave it as .claude/skills/mermaid-rasterize/SKILL.md (or your agent's skills folder).

name: mermaid-rasterize
description: Rasterize specific mermaid blocks inside a markdown file into PNG images. Use when mermaid diagrams don't render in the target viewer (GitHub, Notion, PDF, etc.). Triggers on: rasterize diagrams, mermaid isn't rendering, convert mermaid to images, replace mermaid blocks with images.

Mermaid Rasterize

Converts user-selected mermaid blocks into a PNG + .mmd source file, then rewrites only those blocks in the markdown with image references.

0. Resolve inputs from context — avoid redundant reads

Before reading any file, check what is already available in the conversation:

What to resolve	Check first	Fallback
Mermaid block content	Already in conversation? Use it directly	Read the markdown file
Which blocks to convert	User specified them? Proceed	List found blocks and ask
Markdown file path	Mentioned in conversation? Use it	Ask the user
Output/asset folder	Mentioned in conversation? Use it	Run detection (Step 2)

Only perform file reads for information that is genuinely missing. Never re-read content already visible in context.

1. Install mmdc

bash

which mmdc || npm install -g @mermaid-js/mermaid-cli

On sandbox errors (Linux/CI), create once and reuse:

bash

echo '{"args":["--no-sandbox","--disable-setuid-sandbox"]}' > /tmp/puppeteer.json

Append --puppeteerConfigFile /tmp/puppeteer.json to every mmdc call.

2. Detect asset folder (only if not already known)

bash

ls $(dirname <file>) && ls $(dirname <file>)/..

Pick the first match:

assets/ exists → use it
images/ or img/ or static/ exists → use it
Other images already alongside the .md → use same folder
Nothing found → ask the user before continuing

3. Name each diagram

contextname: markdown filename without extension, slugified (e.g. sistema-auth)
diagramname: infer from diagram type or first node label; fallback to diagram-1, diagram-2

Output files per block:

<asset-folder>/diagram-{contextname}-{diagramname}.mmd   ← source
<asset-folder>/image-{contextname}-{diagramname}.png     ← rendered

4. Extract, save, and convert

For each confirmed block:

bash

cat > <asset-folder>/diagram-{contextname}-{diagramname}.mmd << 'EOF'
<mermaid content>
EOF

mmdc \
  -i <asset-folder>/diagram-{contextname}-{diagramname}.mmd \
  -o <asset-folder>/image-{contextname}-{diagramname}.png \
  --scale 2 --backgroundColor white

5. Rewrite the markdown

Replace only the converted blocks with a relative image reference. Leave all other blocks untouched.

markdown

![{diagramname}]({asset-folder}/image-{contextname}-{diagramname}.png)

Save updated .md and generated files to /mnt/user-data/outputs/ mirroring the folder structure.

6. Present outputs

Call present_files with the updated .md first, then each .png. Tell the user which diagrams were converted and which were skipped.

Troubleshooting

Problem	Fix
Sandbox crash	Add `--puppeteerConfigFile /tmp/puppeteer.json`
`mmdc` not found	`export PATH="$PATH:$(npm root -g)/.bin"`
Blank PNG	Validate syntax at https://mermaid.live
Broken image links	Verify relative path from `.md` to asset folder

Files

Just SKILL.md in .ai/skills/mermaid-rasterize of JocysCom/FocusLogger.

Open the folder on GitHubat commit b32c096

Compare with similar skills

Mermaid Rasterize next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Mermaid Rasterize compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Mermaid Rasterize this skillJocysCom/FocusLogger	213	—	~835	Automated safety check: Pass	GPL-3.0	3 mo ago
GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram	18k	—	~427	Automated safety check: Pass	MIT	yesterday
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid	176	1 repos	~5.6k	Automated safety check: Pass	None	1 mo ago
GitDiagram Repo Architectureahmedkhaleel2004/gitdiagram	18k	—	~429	Automated safety check: Pass	MIT	yesterday
Deep Repository Architecture Analyzeryzddmr6/repo-analyzer	491	—	~2.2k	Automated safety check: Pass	MIT	5 mo ago
Work Issuejoesaby/astro-mermaid	123	—	~891	Automated safety check: Pass	MIT	2 mo ago

Similar skills

GitDiagram Repository Overview
ahmedkhaleel2004/gitdiagram
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
18k GitHub stars~427 tokensUpdated yesterday
DevelopmentAuto-check passed
Design Doc Mermaid
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
176 GitHub starsUsed in 1 repo~5.6k tokens
DevelopmentAuto-check passed
GitDiagram Repo Architecture
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
18k GitHub stars~429 tokensUpdated yesterday
DevelopmentAuto-check passed
Deep Repository Architecture Analyzer
yzddmr6/repo-analyzer
Produces an in-depth architecture report on an open-source project or framework, explaining why it is designed the way it is rather than just what the code does.
491 GitHub stars~2.2k tokensUpdated 5 mo ago
DevelopmentAuto-check passed
Work Issue
joesaby/astro-mermaid
End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.
123 GitHub stars~891 tokensUpdated 2 mo ago
DevelopmentAuto-check passed
Domain Diagram
shuotao/REVIT_MCP_study
引導剛寫完 domain 的老師把 SOP 流程圖像化：先討論主流程、做流程健檢（迴圈／死路／缺口），再把流程整理成結構化 spec，交由 .claude/skills/domain-diagram/scripts/mermaidfromspec.py 確定性地產出 GitHub 原生 mermaid 圖與健檢結論並回嵌…
102 GitHub stars~816 tokensUpdated 1 mo ago
DevelopmentAuto-check passed

More from JocysCom/FocusLogger

AI Self Improvement
JocysCom/FocusLogger
Update, create, improve, and synchronise this repository's AI agent instructions and related assets (including skills).
213 GitHub stars~1.1k tokensUpdated 3 mo ago
Auto-check passed
QA Tester
JocysCom/FocusLogger
Create and maintain automated tests in Microsoft-native/.NET projects with a minimal stack — MSTest runner, System.Windows.Automation for Windows desktop, Playwright for real browser smoke.
213 GitHub stars~12k tokensUpdated 3 mo ago
Auto-check passed
Solution Patterns
JocysCom/FocusLogger
Establish and enforce deterministic path patterns across Code ↔ UI route/menu ↔ Test for any project.
213 GitHub stars~8k tokensUpdated 3 mo ago
Auto-check passed
Repo Documentation Gatherer
JocysCom/FocusLogger
Gather, improve, and curate repository documentation and wiki content.
213 GitHub stars~1.2k tokensUpdated 3 mo ago
Auto-check passed
PR Review
JocysCom/FocusLogger
AI-assisted pull request review workflow for Azure DevOps Git repositories.
213 GitHub stars~12k tokensUpdated 3 mo ago
Auto-check: warnings
Repository Analysis
JocysCom/FocusLogger
Generate or refresh .ai/repository-analysis.instructions.md whenever the user needs a repository-wide map of architecture, projects, technology stack, developer workflows, CI/testing, documentation…
213 GitHub stars~3.1k tokensUpdated 3 mo ago
Auto-check passed

Works with

Questions about Mermaid Rasterize

What does Mermaid Rasterize do?

Rasterize specific mermaid blocks inside a markdown file into PNG images. Mermaid Rasterize is an agent skill from JocysCom/FocusLogger. Rasterize specific mermaid blocks inside a markdown file into PNG images.

When should I use Mermaid Rasterize?

Mermaid Rasterize fits situations like: mermaid diagrams dont render in the target viewer (GitHub; : rasterize diagrams; mermaid isnt rendering; convert mermaid to images.

How do I install Mermaid Rasterize in Claude Code?

Run `npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a claude-code`. Or copy the skill folder (.ai/skills/mermaid-rasterize in JocysCom/FocusLogger) into .claude/skills/mermaid-rasterize in your project. Claude Code loads it when a task matches its description.

How do I install Mermaid Rasterize in Codex?

Run `npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a codex`. Or copy the skill folder (.ai/skills/mermaid-rasterize in JocysCom/FocusLogger) into .agents/skills/mermaid-rasterize in your project. Codex loads it when a task matches its description.

Can I use Mermaid Rasterize in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add JocysCom/FocusLogger --skill mermaid-rasterize -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/mermaid-rasterize, .gemini/skills/mermaid-rasterize, .github/skills/mermaid-rasterize and .opencode/skills/mermaid-rasterize in your project.

What does Mermaid Rasterize need to run?

Going by SKILL.md and its folder, Mermaid Rasterize needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Mermaid Rasterize access the network?

SKILL.md names 1 domain. As links in the text: mermaid.live. This is read from the text; nothing was executed.

Is Mermaid Rasterize safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Mermaid Rasterize use?

Mermaid Rasterize is published under the GPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Mermaid Rasterize use?

About 835 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Mermaid Rasterize?

Skills that share tags, products or a category with Mermaid Rasterize: GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars), GitDiagram Repo Architecture (ahmedkhaleel2004/gitdiagram, 18k stars) and Deep Repository Architecture Analyzer (yzddmr6/repo-analyzer, 491 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Mermaid Rasterize?

JocysCom (a GitHub organization) maintains it in JocysCom/FocusLogger, which has 213 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on June 30, 2026.

Source: JocysCom/FocusLogger on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Mermaid Rasterize

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Mermaid Rasterize

0. Resolve inputs from context — avoid redundant reads

1. Install mmdc

2. Detect asset folder (only if not already known)

3. Name each diagram

4. Extract, save, and convert

5. Rewrite the markdown

6. Present outputs

Troubleshooting

Files

Compare with similar skills

Similar skills

More from JocysCom/FocusLogger

Related

Questions about Mermaid Rasterize