Esperando entrada
¿Qué es el Editor de Diagramas Mermaid?
Mermaid es una herramienta de dibujo de diagramas basada en JavaScript que utiliza una sintaxis de texto similar a Markdown para generar diversos diagramas. Sin necesidad de arrastrar formas manualmente, basta con escribir descripciones de texto simples para generar automáticamente diagramas de flujo, diagramas de secuencia, diagrama de clases y más.
Esta herramienta proporciona un entorno de edición Mermaid en línea con previsualización en tiempo real, arrastrar y hacer zoom, y funciones de exportación, ayudando a los desarrolladores a crear y compartir diagramas rápidamente.
Cómo usar
Uso básico
- Escribe la sintaxis Mermaid en el editor de la izquierda
- El diagrama se renderizará en tiempo real en la vista previa de la derecha
- Usa el ratón para arrastrar y mover el diagrama, y la rueda del ratón para hacer zoom
- Haz clic en el botón de exportar para guardar como PNG o SVG
Tipos de diagramas soportados
Ejemplos
Diagrama de flujo
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Action A]
B -->|No| D[Action B]
C --> E[End]
D --> EDiagrama de secuencia
sequenceDiagram
participant Client
participant Server
participant Database
Client->>Server: Send Request
Server->>Database: Query Data
Database-->>Server: Return Results
Server-->>Client: Send ResponseDiagrama de clases
classDiagram
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+fetch()
}
class Cat {
+purr()
}
Animal <|-- Dog
Animal <|-- CatPreguntas frecuentes
¿Qué tipos de diagramas se soportan?
Se soportan 9 tipos de diagramas: diagrama de flujo (graph/flowchart), diagrama de secuencia (sequenceDiagram), diagrama de clases (classDiagram), diagrama de estados (stateDiagram), diagrama ER (erDiagram), diagrama de Gantt (gantt), diagrama circular (pie), mapa mental (mindmap) y diagrama de recorrido (journey).
¿Cómo exportar un diagrama?
Haz clic en el botón «Exportar PNG» o «Exportar SVG» en el panel derecho para descargar el diagrama. El formato PNG es ideal para insertar en documentos, mientras que el formato SVG es adecuado para edición vectorial e impresión.
¿Se puede hacer zoom y mover el diagrama?
Sí. Usa la rueda del ratón para hacer zoom en el diagrama, mantén presionado el botón izquierdo del ratón y arrastra para mover la posición del diagrama. Haz doble clic en el área de vista previa para restablecer la vista al estado inicial.
¿Se suben los datos al servidor?
No. Todo el análisis de la sintaxis Mermaid y el renderizado de diagramas se realizan localmente en el navegador. Los datos no salen de su dispositivo, garantizando total privacidad.