Meltemi

Diagramas como código, ajustados en un lienzo

Código, disposición y movimiento, en archivos que revisas.

Meltemi Diagrams forma parte de la familia Meltemi. Escribes archivos de texto .meltemi; el editor los dibuja junto al código, y cada arrastre, cambio de tamaño o cambio de etiqueta en el lienzo se convierte en una pequeña edición del mismo texto. Diagramas de flujo, de secuencia, C4 y libres, con movimiento, exportados a SVG, PNG, PDF, video y un reproductor HTML.

Abrir la app Instalar Leer la documentación

Texto que escribes, un lienzo que arrastras

Un diagrama es un archivo de texto plano en el lenguaje .meltemi. El código, la disposición y el movimiento viven en él, así que revisas y versionas un diagrama como el resto de tu trabajo.

Código

En VS Code el texto tiene diagnósticos, autocompletado, cambio de nombre, formato y correcciones rápidas. En la línea de comandos, validate revisa proyectos completos y termina con código 1 si hay errores.

Lienzo

Junto al código hay un lienzo con cuadrícula, guías, trazado de rutas e inspector. Arrastra una caja, haz doble clic en una etiqueta o conecta dos cajas: cada gesto es una pequeña edición del texto, así que el diff de un cambio muestra exactamente qué se movió.

VS Code y el navegador

El mismo lienzo funciona en la extensión de VS Code y en la app, que la documentación llama playground. La app no necesita instalación; la extensión abre el lienzo junto a cualquier archivo .meltemi.

Este es el pequeño diagrama de flujo que escribe meltemi-diagrams init:

language "0.2"

diagram overview: flow {
  title "Overview"
  description "How a request reaches the data"
  direction LR

  client["Client"]
  api["API"] { description "Handles requests" }
  db[("Database")]

  client -> api: "HTTPS" as request
  api -> db: "Reads and writes" as store
}

Cuatro perfiles, un lenguaje

Cada diagrama declara su perfil, como en diagram overview: flow. Los cuatro se escriben en el mismo lenguaje y se dibujan en el mismo lienzo.

Perfiles de diagrama
Perfil Qué dibuja
flow Diagramas de flujo: cajas y conectores con notas, marcas, cilindros de datos, rombos de decisión, bandas de grupo y etiquetas de paso, con una disposición automática que respeta las posiciones que fijas.
sequence Diagramas de secuencia: participantes, llamadas, respuestas, mensajes asíncronos, activaciones, notas y todos los fragmentos (alt, opt, loop, par, break, critical, region), con escenarios que se exportan por separado.
c4 Vistas C4 de un modelo compartido: personas, sistemas, contenedores, almacenes de datos y componentes, en vistas de contexto, de contenedores y de componentes. Un cambio de nombre llega a todas las vistas.
free Composiciones libres para diapositivas: cajas en seis formas, texto, iconos e imágenes, grupos y capas.

Movimiento y formatos de exportación

Los efectos recorren los conectores: partículas, trazos en movimiento y pulsos. Las historias encadenan escenas que muestran, ocultan, resaltan y enfocan partes de un diagrama, mueven una cámara y cambian de vista con un corte, un fundido o una transformación. Ambos usan un reloj determinista, y se puede exportar cualquier fotograma.

Exportaciones
Formato Qué obtienes Notas
SVG Un solo archivo con sus fuentes, estático o animado con una alternativa estática. La app y la línea de comandos.
PNG Una imagen a la escala que elijas, con fondo transparente opcional. La app y la línea de comandos.
PDF Páginas vectoriales con texto seleccionable y enlaces. La línea de comandos escribe el archivo; la app usa el diálogo de impresión del navegador, donde Guardar como PDF conserva los vectores.
Reproductor HTML Una página sin conexión, o un fragmento para incrustar, que reproduce una historia o los efectos de un diagrama. Pausa, progreso, escenas, control con el teclado, movimiento reducido y un resumen en texto.
GIF, WebM, MP4 Una historia o los efectos de un diagrama grabados fotograma a fotograma. El video es de 1080p a 30 fps de forma predeterminada; el GIF, de 960 × 540 a 15 fps. En la app, WebM y MP4 dependen de los codificadores del navegador y aparecen desactivados donde no hay ninguno.
Catálogo HTML Una página sin conexión para todo un proyecto: sus diagramas e historias por carpeta, con búsqueda y el reproductor. meltemi-diagrams build catalog, o Descargar en la app.

En la línea de comandos, PNG, PDF y video los dibuja un Edge, un Chrome o un Chromium instalado, y el video lo codifica un FFmpeg instalado. No se descarga nada. La app no necesita ninguno de los dos.

Si vienes de Mermaid o PlantUML

Los importadores leen Mermaid (flowchart, sequenceDiagram, los diagramas C4, architecture-beta y block-beta), PlantUML (diagramas de componentes, de despliegue, de casos de uso, de secuencia y C4-PlantUML, con el preprocesador) y los bloques de diagrama de los archivos Markdown. Cada construcción se informa como convertida, aproximada o descartada, y el origen nunca se modifica. Los demás tipos de diagrama y los archivos de editores como draw.io, Lucidchart o Visio no se importan.

Instalación

La app no necesita instalación. La línea de comandos y el editor sirven para trabajar con archivos de tus propias carpetas.

Línea de comandos

Necesita Node 22.12 o posterior.

npm install --global @meltemi/diagrams-cli

El paquete es @meltemi/diagrams-cli; el comando que instala es meltemi-diagrams, también disponible como mdg. Un primer diagrama: 

meltemi-diagrams init shop
meltemi-diagrams export shop --format png

VS Code

La extensión es Meltemi Diagrams, con el id meltemi.meltemi-diagrams. Necesita Visual Studio Code 1.95 o posterior. 

code --install-extension meltemi.meltemi-diagrams

O busca Meltemi Diagrams en la vista Extensiones. Abre un archivo .meltemi y el lienzo se abre junto al código.

No hace falta una cuenta

La app no necesita una cuenta. Funciona por completo en tu navegador, y tu trabajo se guarda ahí entre visitas; sin una cuenta, nada de lo que escribes se envía a un servidor. Iniciar sesión con GitHub o Google es opcional, y es la manera de tener proyectos guardados entre dispositivos, versiones, compartir por enlace (ver no requiere cuenta; editar sí), edición en conjunto, publicar un catálogo, y push y pull desde la línea de comandos. La tabla dice cuáles de estas capacidades existen hoy.

Especificado, sin publicar. La app, la línea de comandos y el editor funcionan hoy sin cuenta. Lo que agrega iniciar sesión está especificado en la documentación del proyecto y todavía no se ha publicado.
Lo que depende de una cuenta
Capacidad Estado Notas
Dibujar, editar, importar y exportar en la app Disponible Sin cuenta. El proyecto se guarda en tu navegador; Compartir copia un enlace que lleva el proyecto después del # de la dirección, una parte que nunca llega a un servidor.
Proyectos guardados entre dispositivos, con versiones Todavía no Requiere una cuenta. Una copia de cada proyecto en tu cuenta, una copia local que también funciona sin conexión, y versiones que puedes nombrar y restaurar.
Compartir por enlace y con personas concretas Todavía no El enlace de un proyecto puede ser privado, de solo lectura o editable, y se invita por correo a personas concretas con el rol de lector o de editor. Cualquiera a quien el enlace admita puede ver sin cuenta; editar sí requiere una.
Edición en conjunto Todavía no Requiere una cuenta. Ves quién está en el proyecto, escribes en el mismo archivo al mismo tiempo y deshaces solo tus propias ediciones. Hasta veinte personas en un proyecto.
Publicar un catálogo Todavía no Requiere una cuenta. El catálogo HTML del proyecto en una dirección pública de su propio dominio, aparte de la app.
Push y pull desde la línea de comandos Todavía no Requiere una cuenta. mdg login guarda un token; push, pull y publish mantienen una carpeta sincronizada con un proyecto en la nube. Todos los demás comandos funcionan sin ella.

El IDE de Meltemi no usa esta cuenta. Sigue sin pedir ninguna.

Documentación y código

La documentación cubre los primeros pasos, el lenguaje, la línea de comandos, el editor, la app y los importadores. El código tiene licencia MIT.

Documentación Repositorio