feat: Enable Mermaid diagram support in Docusaurus#6
Closed
TellMeAlex wants to merge 5 commits intomainfrom
Closed
feat: Enable Mermaid diagram support in Docusaurus#6TellMeAlex wants to merge 5 commits intomainfrom
TellMeAlex wants to merge 5 commits intomainfrom
Conversation
…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.
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.
Descripción
Agrega soporte nativo para diagramas Mermaid en la documentación del sitio, permitiendo crear visualizaciones como diagramas de flujo, gráficos, y más directamente en los documentos.
Cambios principales
@docusaurus/theme-mermaidpara integración nativadocusaurus.config.jscon tema adaptativo para modo claro/oscuroBeneficios
✅ Mejor visualización de conceptos complejos en la documentación
✅ Soporte para múltiples tipos de diagramas (flowchart, sequence, state, etc.)
✅ Tema adaptativo que respeta preferencias de color del usuario
✅ Sin necesidad de herramientas externas para generar imágenes
Testing