mermaid-generator
Mermaid Diagram Generator
Overview
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.
When to Use This Skill
Use the mermaid-generator skill when users request:
More from vishalsachdev/claude-skills
chartjs-generator
This skill generates interactive Chart.js visualizations for use in iframes using any chart type supported by the library (line, bar, pie, doughnut, radar, polar area, bubble, scatter). Use this skill when users need to create data visualizations for educational content, reports, or dashboards. The skill creates complete MicroSim packages with HTML, CSS, and documentation.
44infographic-generator-p5
This skill generates an interactive infographic visualization using p5.js that read vis-network compatible JSON data. Use this skill when creating educational infographics with nodes, edges, and hover interactions where users can explore relationships between concepts. Each infographic displays shapes with labels, shows tooltips on hover, and displays detailed descriptions in a control panel below the drawing area. The nodes are placed in absolute coordinates. The output is not a responsive design.
18secure-nextjs-api-routes
A comprehensive security middleware system for Next.js 13+ App Router API routes that provides authentication, rate limiting, CSRF protection, audit logging, and security headers in a composable, production-ready pattern. Use when building secure Next.js APIs that need protection against common web vulnerabilities.
13map-generator
This skill generates interactive maps using the Leaflet JavaScript library. Use this skill when users need to create geographic visualizations, location-based data displays, or interactive maps for educational textbooks. The skill creates complete MicroSim packages with HTML, CSS, and documentation, optimized for iframe embedding in narrow MkDocs pages with navbar and TOC.
10microsim-p5
Create an interactive educational MicroSim using the p5.js JavaScript library with distinct regions for drawing and interactive controls. Each MicroSim is a directory located in the /docs/sims folder. It has a main.html file that references the javascript code and the main.html can be referenced as an iframe from the index.md. The metadata.json contains Dublin core metadata about the MicroSim.
8install-skill-tracker
This skill installs a complete Claude Code skill tracking system using hooks to automatically log skill usage, execution duration, token usage, and user prompts for later analysis. Use this skill when setting up activity tracking in a Claude Code project to identify patterns, monitor costs, and discover opportunities for new skills.
7