# Cómo utilizar Mermaid.js para diagramas de flujo en NoteRich – Tutorial completo Visualizar procesos complejos, arquitecturas de sistemas o árboles de decisiones puede ser un desafío con solo texto. **Mermaid.js** es una poderosa herramienta basada en JavaScript para crear diagramas y gráficos. En **NoteRich**, hemos integrado Mermaid.js directamente en el editor, lo que le permite generar diagramas de flujo, diagramas de secuencia y más, sin tener que salir del editor de notas. Este guía le mostrará todo lo que necesita saber para dominar los diagramas Mermaid en NoteRich, incluyendo cómo utilizar la inteligencia artificial y el reconocimiento óptico de caracteres para generarlos al instante. --- ## 🚀 ¿Por qué usar Mermaid en NoteRich? * **Basado en texto:** Defina sus diagramas utilizando código, lo que hace que sea fácil de controlar versiones y editar. * **Previsualización en tiempo real:** Ve sus cambios al escribir. * **Versátil:** Soporta diagramas de flujo, diagramas de secuencia, diagramas de clases, diagramas de estado, diagramas de Gantt y más. * **Impulsado por inteligencia artificial y OCR:** Genere diagramas a partir de descripciones en lenguaje natural o mediante el escaneo de imágenes existentes. * **Primero en el local:** Sus definiciones de diagramas se almacenan localmente en sus notas, lo que garantiza la privacidad y el acceso sin conexión. --- ## 📝 Comenzando: Inserción de un diagrama Mermaid Existen tres formas principales de insertar un diagrama Mermaid en NoteRich: ### Método 1: El comando `/` 1. Coloque el cursor donde desea colocar el diagrama. 2. Escriba `/` para abrir el selector de componentes. 3. Busque **"Mermaid"** o **"Diagram"**. 4. Seleccione **Mermaid Diagram** de la lista. ### Método 2: La barra de herramientas 1. Haga clic en el botón **Insertar** en la barra de herramientas. 2. Vaya a la sección **Visualización** o **Diagramas**. 3. Haga clic en **Mermaid**. ### Método 3: Asistente de inteligencia artificial 1. Abra el **Asistente de inteligencia artificial** (a través de `/ai` o la barra de herramientas). 2. Descríbalo el diagrama que desea (por ejemplo, "Crear un diagrama de flujo para un proceso de inicio de sesión del usuario"). 3. La inteligencia artificial generará el código Mermaid para usted, que puede insertar directamente en su nota. Una ventana de configuración aparecerá con un editor de código y una ventana de previsualización en tiempo real. --- ## 🛠️ La interfaz del editor Mermaid El editor Mermaid en NoteRich está diseñado para ser eficiente: * **Área de código:** Un área de texto monoescalar donde escribe la sintaxis Mermaid. * **Previsualización en tiempo real:** Una renderización en tiempo real de su diagrama. Si hay un error de sintaxis, aparecerá una superposición de error para ayudarle a depurar. * **Icono de ayuda:** Haga clic en el icono `?` junto a "Código de diagrama" para abrir la documentación oficial de [Mermaid.js](https://mermaid.js.org/intro/) para referencias sintácticas detalladas. * **Botón de confirmación:** Guarda su diagrama e inserta el mismo en la nota. > **Consejo:** Puede hacer doble clic en cualquier diagrama Mermaid existente en su nota para volver a abrir el editor y realizar cambios. --- ## 📊 Sintaxis básicas de diagramas de flujo Los diagramas de flujo son el caso de uso más común de Mermaid. Aquí está cómo crearlos. ### 1. Definir la dirección Comience definiendo la dirección del flujo: * `graph TD`: De arriba hacia abajo * `graph LR`: De izquierda a derecha * `graph BT`: De abajo hacia arriba * `graph RL`: De derecha a izquierda ### 2. Agregar nodos Los nodos se definen con un ID y una etiqueta. ```mermaid graph TD A[Inicio] --> B[Proceso] B --> C{Decisión} C -->|Sí| D[Final] C -->|No| B ``` * `[Texto]`: Nodo rectangular. * `(Texto)`: Rectángulo redondeado. * `((Texto))`: Círculo. * `{Texto}`: Rombo (Decisión). * `[[Texto]]`: Subrúbica. ### 3. Conectar nodos * `-->`: Flecha sólida. * `-.->`: Flecha entintada. * `==>`: Flecha gruesa. * `-- Texto -->`: Flecha con etiqueta. --- ## 🤖 Generación de diagramas con inteligencia artificial ¿No quiere escribir código? Deje que la inteligencia artificial de NoteRich lo haga por usted. 1. Abra el **Asistente de inteligencia artificial**. 2. Escriba una instrucción como: *"Genere un diagrama de secuencia Mermaid para un cliente que realiza un pedido en línea."* 3. La inteligencia artificial devolverá un bloque de código como este: ```mermaid sequenceDiagram participant Cliente participant Sitio web participant Base de datos Cliente->>Sitio web: Realizar pedido Sitio web->>Base de datos: Comprobar inventario Base de datos-->>Sitio web: Inventario disponible Sitio web-->>Cliente: Confirmación de pedido ``` 4. Copie el código o utilice el botón **Insertar** si está disponible en su interfaz de inteligencia artificial para agregarlo a su nota. --- ## 📸 OCR: Escanee diagramas manuscritos o impresos ¿Tiene una foto de una pizarra o un diagrama de flujo impreso? El **Escaneador de notas (OCR)** de NoteRich puede convertirlo en código Mermaid editable. 1. Abra el **Asistente de inteligencia artificial** y seleccione **Escaneador de notas (OCR)** 2. Cargue una imagen de su diagrama manuscrito o impreso. 3. En la instrucción, especifique: *"Convierta esta imagen en código de diagrama Mermaid.js."* 4. La inteligencia artificial analizará la estructura de la imagen y generará la sintaxis Mermaid correspondiente. 5. Revisar el código generado en el editor y ajustar cualquier error de reconocimiento menor. > **Nota:** Para obtener los mejores resultados, asegúrese de que la imagen sea clara y el texto legible. Los bocetos dibujados a mano pueden requerir algunos ajustes manuales después de la conversión. --- ## 🎨 Funciones avanzadas ### Estilo de nodos Puede personalizar el aspecto de nodos específicos utilizando clases CSS o estilos en línea. ```mermaid graph LR A[Inicio] --> B[Proceso] style A fill:#f9f,stroke:#333,stroke-width:4px style B fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5 ``` ### Subgráficos Agrupe nodos relacionados para una mejor organización. ```mermaid graph TD subgraph Frontend A[Aplicación React] --> B[Componentes UI] end subgraph Backend C[Servidor API] --> D[Base de datos] end B --> C ``` ### Diagramas de secuencia Mermaid no es solo para diagramas de flujo. También puede crear diagramas de secuencia para visualizar interacciones entre sistemas. ```mermaid sequenceDiagram participant Usuario participant NotRich participant Servidor Usuario->>NotRich: Editar nota NotRich->>Servidor: Guardar datos Servidor-->>NotRich: Confirmar guardado NotRich-->>Usuario: Actualizar UI ``` --- ## 💡 Consejos para usuarios de NoteRich 1. **Escape de caracteres especiales:** Si el texto del nodo contiene caracteres especiales como `[]` o `()`, enrótele entre comillas. ```mermaid graph TD A["Nodo con [brackets]"] --> B["Nodo con (parentheses)]" ``` 2. **Copiar como imagen:** Una vez que su diagrama está renderizado, haga clic en él para mostrar la barra de herramientas flotante. Utilice el botón **Copiar imagen** para pegar el diagrama en otras aplicaciones como Slack, Notion o correo electrónico. 3. **Descargar SVG:** Los usuarios avanzados pueden descargar el diagrama como un archivo SVG de alta calidad para uso en presentaciones o publicaciones. --- ## ❓ Solución de problemas * **¿El diagrama no se muestra?** Verifique la superposición de errores en la ventana de previsualización. Problemas comunes incluyen signos de puntuación de cierre `]` o sintaxis de flecha incorrecta. * **¿Errores de sintaxis?** Asegúrese de estar utilizando la sintaxis correcta de Mermaid.js. NoteRich utiliza la versión estable más reciente de Mermaid.js. Consulte la [documentación oficial](https://mermaid.js.org/intro/) si no está seguro. * **¿Precisión del OCR?** Si el resultado del OCR no es perfecto, utilice el Asistente de inteligencia artificial para refinar el código. Puede pegar el resultado preliminar del OCR y pedirle al AI que "Arregle la sintaxis Mermaid". --- ## 🏁 Conclusión Mermaid.js en NoteRich transforma la forma en que documenta procesos y sistemas. Al mantener sus diagramas como código, asegura que siempre estén actualizados, sean fáciles de modificar y estén integrados perfectamente con su base de conocimientos. Con la generación de inteligencia artificial y el reconocimiento óptico de caracteres, crear visualizaciones complejas nunca ha sido más fácil. Comience a visualizar sus ideas hoy mismo. ---