skills.rest
alessandrobologna
alessandrobolognaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mermint-markdown-workflow

Convert Markdown Mermaid code blocks into picture markup and paired light/dark SVG assets.

1|Updated Feb 26, 2026
Search Tags:#markdown#mermaid#github#svg#visual-qa#aws-icons#mermint
One-click install
npx skills add https://github.com/alessandrobologna/mermint --skill mermint-markdown-workflow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mermint-markdown-workflow
Source: https://github.com/alessandrobologna/mermint/tree/main/skills/mermint-markdown-workflow
Command: npx skills add https://github.com/alessandrobologna/mermint --skill mermint-markdown-workflow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Converts Mermaid code blocks embedded in Markdown into GitHub-style picture markup and paired light/dark SVG assets, enabling safe, idempotent README diagram updates and reliable visual QA without destroying source blocks.

Core Features & Use Cases

  • README-style rendering: Produces <picture> markup with light and dark SVG variants suitable for GitHub and README consumption.
  • Source preservation: Supports non-destructive conversion with preserved Mermaid source blocks (keep-mermaid) for traceability and future edits.
  • Visual QA workflow: Rasterizes light/dark SVGs to PNG previews, provides a quality rubric, and prescribes an iterative Rough.js tuning loop for hand-drawn or architecture-beta diagrams.
  • AWS architecture guardrails: Includes guidance and a reference for built-in AWS icon names to produce clearer architecture-beta diagrams.
  • Automation & CI: Describes non-interactive, in-place, and non-destructive preview modes and preflight checks to run reliably in CI environments.

Quick Start

Use the mermint-markdown-workflow to convert README.md Mermaid blocks into picture markup and paired light/dark SVG assets while preserving source blocks and generating PNG previews for visual QA.

Frequently Asked Questions about mermint-markdown-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert Mermaid code blocks in a Markdown file into SVG images for a GitHub README?▼

To convert Mermaid blocks in Markdown, process the file to render diagrams into README-style picture markup with paired light and dark SVG assets. This workflow preserves original source blocks for future edits while generating idempotent diagram updates.

Can I automate Mermaid diagram rendering and visual QA checks in a CI pipeline?▼

Automating Mermaid rendering in CI uses non-interactive, in-place preview modes with preflight checks to run reliably. The workflow rasterizes SVGs to PNG previews, providing a quality rubric for iterative visual QA inspection.

Does this Markdown to SVG workflow support AWS architecture diagrams with built-in icons?▼

This Markdown to SVG workflow supports AWS architecture diagrams by providing guidance and a reference for built-in AWS icon names. It helps produce clearer architecture-beta diagrams and integrates tuning loops for hand-drawn visual styles.

What Node version is required to render Mermaid blocks into light and dark SVG assets?▼

Rendering Mermaid blocks into light and dark SVG assets requires Node >=22. The workflow uses npx-driven invocation of the mermint CLI to process Markdown files and generate README-ready picture markup without destroying original diagram source.

Is there a way to update README diagrams without losing the original Mermaid source code?▼

Updating README diagrams without losing original Mermaid source code uses non-destructive conversion with preserved Mermaid blocks. This approach maintains source traceability for future edits while safely applying idempotent picture markup and SVG updates.

Related Skills

Explore More Software Engineering Skills→
ivanrvpereiraivanrvpereira
17

mermaid

Validate Mermaid diagram syntax and rendering with the official Mermaid CLI.

Community
Basic
RamonsDkaRamonsDka
1

draw-io

Create and edit draw.io XML diagrams and export 2x transparent PNGs.

Community
Advanced
remorsesremorses
40

doppler

Automate Doppler secret management for multi-environment deployments.

Community
Advanced
wfukatsuwfukatsu
8

render-mermaid

Converts CraftTweaker scripts and ZScript into formatted, hyperlinked HTML5 cookbook-style reference documents.

Community
Intermediate