docs: Agregar diagramas Mermaid al artículo sobre Skills, MCP, Sub-agents y Slash Commands#7
Merged
TellMeAlex merged 16 commits intomainfrom Dec 19, 2025
Merged
Conversation
…mands - Artículo educativo sobre composición en Claude Code (3400 palabras) - Explica Core Four: contexto, modelo, prompt, herramientas - Comparativa detallada entre 4 mecanismos de extensión - Matriz de decisión con patrones de uso - 3 casos prácticos: commit messages, procesamiento de docs, análisis paralelo - Mejores prácticas y anti-patrones comunes - Referencias a documentación oficial de Anthropic Basado en: - Video: "Skills Composicionales en Claude Code" - Docs: Claude Code Skills, MCP, Subagents - Blog: "Skills Explained" de Anthropic
…Docusaurus - 7 tipos diferentes de diagramas Mermaid para testear - Flowcharts (flujos de decisión) - Diagramas de secuencia (interacciones) - Árboles de decisión (Claude Code composición) - Diagramas de componentes (arquitectura) - Gantt charts (timeline) - State diagrams (máquinas de estado) - Instrucciones para testear localmente Objetivo: Validar si Docusaurus 3.9.2 soporta Mermaid de forma nativa y usarlo en futuros artículos educativos.
- Install @docusaurus/theme-mermaid@3.9.2 - Configure markdown.mermaid = true - Register @docusaurus/theme-mermaid theme - Ready to render Mermaid diagrams in markdown This allows creating interactive diagrams for documentation. Tests with 7 different diagram types available in docs/test/mermaid-diagrams-test.md
- Add mermaid.theme configuration in themeConfig - Set light theme: 'default', dark theme: 'dark' - Fixes useColorMode hook errors This resolves the ColorModeProvider issue with Mermaid diagrams.
- Added @docusaurus/theme-mermaid@^3.9.2 to support Mermaid diagrams. - Updated start script in package.json to prevent automatic opening of the browser. - Enhanced bun.lock with new dependencies and versions for improved compatibility. These changes ensure better integration of Mermaid diagrams and streamline the development process.
Se agregaron 7 diagramas Mermaid estratégicamente distribuidos: - Core Four: Visualización de elementos fundamentales - Composición: Cómo mecanismos modifican Core Four - Árbol de decisión: Flujo visual de selección - Escalada gradual: Evolución Prompt → Slash → Skill - Paralelización: Sub-agents procesando en paralelo - Secuencia Skill+MCP: Interacción con servicios externos - Procesamiento documentos: Caso práctico completo Esto mejora significativamente la comprensión de conceptos abstractos en el artículo sobre Skills, MCP, Sub-agents y Slash Commands.
Se actualizaron todos los diagramas con paleta de colores oscuros que contrastan correctamente en tema oscuro (dark mode): - MCP Servers: púrpura oscuro (#9c27b0) - Sub-agents: naranja oscuro (#f57c00) - Skills: verde oscuro (#2e7d32) - Slash Commands: azul oscuro (#1976d2) - Contexto base: gris oscuro (#455a64, #616161, #37474f) Se agregó autonumber al diagrama de secuencia para mejor claridad. Todos los textos ahora tienen color blanco (#fff) para máxima legibilidad.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📊 Resumen
Se agregaron 7 diagramas Mermaid al artículo educativo sobre Skills, MCP Servers, Sub-agents y Slash Commands en Claude Code.
🎨 Diagramas Agregados
Fundamentos
Decisión y Patrones
Ejemplos Prácticos
🎨 Mejoras de Diseño
Colores oscuros optimizados para tema dark mode de Docusaurus
Paleta coherente:
Texto blanco (#fff) para máximo contraste
Bordes blancos de 2px para claridad
✨ Beneficios
✅ Visualización clara de conceptos arquitectónicos complejos
✅ Ayuda a entender cuándo usar cada mecanismo
✅ Muestra patrones de composición de forma visual
✅ Mejora significativamente la legibilidad del artículo
✅ Compatible con Docusaurus 3 (Mermaid es nativo)
🔍 Testing
📝 Nota: Este PR completa la implementación del artículo sobre la arquitectura composicional de Claude Code con una visualización superior que facilita el aprendizaje.