·mermaid-generator
>_

mermaid-generator

vishalsachdev/claude-skills

Esta habilidad genera diagramas de flujo de trabajo interactivos usando la biblioteca JavaScript de Mermaid para colocarlos en una región estrecha de un libro de texto usando un iframe. Utilice esta habilidad cuando los usuarios soliciten la creación de diagramas de flujo, diagramas de procesos, visualizaciones de flujo de trabajo o árboles de decisión para libros de texto educativos. La habilidad crea paquetes MicroSim con archivos HTML independientes con fondos coloridos, fuentes de 16 puntos y renderizado de arriba hacia abajo de forma predeterminada, guardados en /docs/sims/ siguiendo el patrón MicroSim.

2Instalaciones·0Tendencia·@vishalsachdev

Instalación

$npx skills add https://github.com/vishalsachdev/claude-skills --skill mermaid-generator

SKILL.md

Generate simple minimalist but colorful interactive workflow diagrams using Mermaid.js for intelligent textbooks. Creates complete MicroSim packages with standalone HTML files, MkDocs integration, and Dublin Core metadata. Each diagram features colorful node backgrounds, 16-point fonts for optimal readability, and follows the educational MicroSim pattern.

Because this skill is part of the workflow for creation of textbooks using mkdocs, the design goal is to create simple unadorned diagrams without any complex padding, borders or decoration. This is because our focus is to educate, not entertain and show off our ability to do rounded corners and gradient shading.

If the description is incomplete or unclear, prompt the user for additional information:

Esta habilidad genera diagramas de flujo de trabajo interactivos usando la biblioteca JavaScript de Mermaid para colocarlos en una región estrecha de un libro de texto usando un iframe. Utilice esta habilidad cuando los usuarios soliciten la creación de diagramas de flujo, diagramas de procesos, visualizaciones de flujo de trabajo o árboles de decisión para libros de texto educativos. La habilidad crea paquetes MicroSim con archivos HTML independientes con fondos coloridos, fuentes de 16 puntos y renderizado de arriba hacia abajo de forma predeterminada, guardados en /docs/sims/ siguiendo el patrón MicroSim. Fuente: vishalsachdev/claude-skills.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/vishalsachdev/claude-skills --skill mermaid-generator
Categoría
>_Productividad
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es mermaid-generator?

Esta habilidad genera diagramas de flujo de trabajo interactivos usando la biblioteca JavaScript de Mermaid para colocarlos en una región estrecha de un libro de texto usando un iframe. Utilice esta habilidad cuando los usuarios soliciten la creación de diagramas de flujo, diagramas de procesos, visualizaciones de flujo de trabajo o árboles de decisión para libros de texto educativos. La habilidad crea paquetes MicroSim con archivos HTML independientes con fondos coloridos, fuentes de 16 puntos y renderizado de arriba hacia abajo de forma predeterminada, guardados en /docs/sims/ siguiendo el patrón MicroSim. Fuente: vishalsachdev/claude-skills.

¿Cómo instalo mermaid-generator?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/vishalsachdev/claude-skills --skill mermaid-generator Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/vishalsachdev/claude-skills