🚀 Visual Paradigm se complace en anunciar que VPasCode –nuestra plataforma unificada de diagramas como código– ahora admite cuatro tipos adicionales de diagramas de Mermaid. Ahora puede crear los siguientes diagramas profesionales utilizando una notación de texto sencilla:
- 🐟 Diagrama Ishikawa (de hueso de pescado / causa y efecto) – El análisis de la causa raíz se vuelve sencillo
- ⚡ Diagrama de modelado de eventos – Diseñe el flujo de información del sistema y los cronogramas
- 🟡 Diagrama de Venn – Visualice las relaciones y intersecciones entre conjuntos
- 🗺️ Mapas de Wardley – Mapeo de la cadena de valor estratégica y análisis de evolución
Ya sea que usted sea un gerente de producto, arquitecto de software, desarrollador o estratega, VPasCode le ayuda a crear diagramas utilizando la sintaxis que ya conoce, convista previa en tiempo real, compartición de URL con un solo clic y exportación gratuita en SVG/PNG.
🔍 ¿Qué hace diferente a VPasCode?
VPasCode (abreviatura de Visual Paradigm’s asCode plataforma) es un entorno unificado de texto a diagrama. Renderiza PlantUML, Mermaid, Graphviz, y más (con formatos adicionales próximos). Puedes cambiar libremente entre sintaxis dentro del mismo editor, sin necesidad de aprender múltiples herramientas.
Esta mejora se centra en la última sintaxis de Mermaid (v11.12.3+ y v11.15.0+). A continuación encontrarás ejemplos de código funcionales para cada nuevo tipo de diagrama: simplemente cópialos y pégales en VPasCode.
📌 1. Diagrama Ishikawa (de la espina de pescado) – Análisis de la causa raíz
También conocido como diagrama de causa y efecto o diagrama de espina de pescado. Perfecto para la gestión de calidad y sesiones de resolución de problemas.
✅ Ejemplo – Análisis de la causa raíz de “Foto borrosa”
ishikawa-beta
Foto borrosa
Proceso
Fuera de enfoque
Velocidad de obturación demasiado lenta
Película protectora no retirada
Filtro de mejoramiento aplicado
Usuario
Manos inestables
Equipo
LENTE
Lente inadecuado
Lente dañado
Lente sucio
SENSOR
Sensor dañado
Sensor sucio
Entorno
El objeto se movió demasiado rápido
Demasiado oscuro
💡 Notas de sintaxis: La primera línea define el problema (la cabeza del pez). La sangría crea las ramas causales jerárquicas (las espinas del pez).
📌 2. Diagrama de modelado de eventos – Comportamiento del sistema con el tiempo
El modelado de eventos describe cómo cambia la información dentro de un sistema con el tiempo. Utiliza interfaces de usuario, comandos, eventos y procesadores organizados en carriles. VPasCode admite tanto la sintaxis compacta como la relajada, datos en línea y bloques de datos externos.
✅ Ejemplo mínimo – Flujo de agregar artículo al carrito de compras
eventmodeling
tf 01 ui CartUI
tf 02 cmd AgregarArtículo
tf 03 evt ArtículoAgregado
✅ Ejemplo de datos en línea
eventmodeling
tf 01 ui CartUI
tf 02 cmd AgregarArtículo { descripción: string }
tf 03 evt ArtículoAgregado { descripción: string }
✅ Bloques de datos y múltiples referencias
eventmodeling
tf 01 ui CartUI
tf 02 cmd AgregarArtículo [[AgregarArtículo01]]
tf 03 evt ArtículoAgregado [[ArtículoAgregado]]
tf 04 cmd AgregarArtículo [[AgregarArtículo02]]
tf 05 evt ArtículoAgregado [[ArtículoAgregado]]
data AgregarArtículo01 {
descripción: 'john'
imagen: 'avatar_john'
precio: 20.4
}
data AgregarArtículo02 {
descripción: 'jack'
imagen: 'avatar_jack'
precio: 12.5
}
data ArtículoAgregado {
descripción: string
imagen: string
precio: número
}
✅ Reiniciar marco
modelado de eventos
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
💡 Tokens clave: tf (marco de tiempo), rf (marco de reinicio), ui / cmd / evt / pcr / rmo (tipos de entidad). Usa espacios de nombres como Inventory.InventoryChanged para crear carriles separados.
📌 3. Diagrama de Venn – Relaciones y intersecciones entre conjuntos
Muestra relaciones lógicas entre conjuntos usando círculos superpuestos. Admite tamaños personalizados, etiquetas, nodos de texto y estilo.
✅ Ejemplo básico – Superposición de equipos
venn-beta
título "Superposición de habilidades del equipo"
conjunto Frontend
conjunto Backend
unión Frontend,Backend["Diseño de API"]
✅ Ejemplo de tamaños, nodos de texto y estilo
venn-beta
conjunto A["Equipo Frontend"]:20
texto A1["React"]
texto A2["Sistemas de diseño"]
conjunto B["Equipo Backend"]:12
texto B1["Desarrollo de API"]
unión A,B["Habilidades Full-stack"]:3
texto AB1["Especificación OpenAPI"]
estilo A relleno:#ff6b6b
estilo A,B color:#2c3e50
estilo A1 color:#e74c3c
💡 Usa :número para controlar el tamaño del círculo, texto para agregar etiquetas dentro de los conjuntos, y estilo para colores personalizados.
📌 4. Mapas de Wardley – Mapeo de la cadena de valor estratégica
Los mapas de Wardley te ayudan a visualizar los componentes de un negocio o sistema, su posición en la cadena de valor y su etapa evolutiva (Génesis → Construido a medida → Producto → Commodity). VPasCode admite completamente la sintaxis oficial de Mermaid para mapas de Wardley usandowardley-beta como tipo de diagrama.
✅ Ejemplo – Canal de desarrollo de software
wardley-beta
título Canal de implementación de software
ancla "Necesidades del usuario" [0.95, 0.70]
componente "Implementación manual" [0.15, 0.25]
componente "Scripts de CI/CD" [0.45, 0.50]
componente "Canal automatizado" [0.75, 0.65]
componente "Infraestructura en la nube" [0.30, 0.40]
"Necesidades del usuario" -> "Canal automatizado"
"Canal automatizado" -> "Scripts de CI/CD"
"Scripts de CI/CD" -> "Implementación manual"
"Implementación manual" -> "Infraestructura en la nube"
evolver "Implementación manual" 0.20
evolver "Scripts de CI/CD" 0.55
evolver "Canal automatizado" 0.85
evolver "Infraestructura en la nube" 0.70
nota "La adopción de la nube acelera la madurez del canal" [0.40, 0.35]
💡 Los nombres de componentes con espacios deben ir entre comillas dobles. Las coordenadas van de 0 a 1 en ambos ejes (visibilidad frente a evolución).
🛠️ Prueba VPasCode ahora mismo
Ve al VPasCode editor: https://www.vpascode.com/.
Selecciona el modo de sintaxis de Mermaid, pega cualquiera de los ejemplos de código anteriores y observa cómo tu diagrama se renderiza instantáneamente.
Empieza gratis – No se requiere tarjeta de crédito, ni instalación. Todo lo que necesitas es un navegador.
📖 Documentación oficial y referencias
Visual Paradigm – Modelado profesional, simplificado.
VPasCode es la plataforma de diagramas como código para equipos que valoran la eficiencia, la colaboración y el diagramado basado en texto.