jocyscom/focuslogger/mermaid-rasterize

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:

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

1. Install mmdc

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

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

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)

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

Pick the first match:

1. assets/ exists → use it
2. images/ or img/ or static/ exists → use it
3. Other images already alongside the .md → use same folder
4. 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:

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.

![{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