Generar diagramas con Claude y el artifact Mermaid

Sergi Rodríguez  
14-07-2024 19:57  
4 minutos de lectura  

Estaba hoy usando el chat de Claude para solicitarle ideas para monetizar un podcast usando IA (spoiler: es un proyecto que estoy cocinando), cuando sin pedirselo me generó un "artefacto" ("artifact" le llaman en inglés) a la derecha del chat con un gráfico del tipo "mapa mental". En realidad yo nunca le pedí que me hiciera un gráfico, pero la IA entendió que en el contexto de lo que le estaba comentando (mi idea de unir la IA con los contenidos de un podcast) tomó la iniciativa de generar un diagrama!!

Para que sepas de qué estoy hablando, te muestro a continuación otro ejemplo que he probado a continuación: le pedí directamente "Genera un diagrama ..." y esto es lo que generó!!

Captura de pantalla del chat Claude generando un artifact del tipo Diagrama de flujo

Trucos

  • Después de que te haya creado el diagrama, le puedes pedir que le cambie lo que tú creas necesario: colores, disposición etc.
  • Por ejemplo, le puedes pedir que en lugar de disposición "arriba a abajo" o construya con disposición "izquierda a derecha".
  • Una vez creado el diagrama, puedes pulsar el botón "Code" y te mostrará que el diagrama está construido de forma "super-natural" con un código como este:

Captura de pantalla del código de un Diagrama creado con mermaid en un artifact de Claude

Mermaid

Vengo descubriendo que detrás de este "motor de construcción de diagramas" está Mermaid, que es una herramienta de código abierto para crear diagramas y gráficos de forma sencilla utilizando texto en formato similar a Markdown:

  1. Facilidad de uso: Permite crear diagramas complejos escribiendo texto simple en lugar de dibujar manualmente.
  2. Versatilidad: Soporta varios tipos de diagramas, incluyendo diagramas de flujo, diagramas de secuencia, gráficos Gantt, diagramas de clases, entre otros.
  3. Basado en JavaScript: Es una herramienta basada en JavaScript que convierte el texto en diagramas visuales de forma dinámica.
  4. Integración: Se puede integrar fácilmente en diversas plataformas y aplicaciones, como GitHub, GitLab, Confluence y más.
  5. Editor en línea: Cuenta con un editor en vivo (Mermaid Live Editor) que permite crear y visualizar diagramas en tiempo real.
  6. Aplicaciones en educación: Es útil para crear mapas conceptuales, mapas mentales y gráficos de flujo, lo que la hace valiosa en entornos educativos.
  7. Colaboración: Facilita la colaboración en equipos, especialmente en entornos empresariales y de desarrollo de software.
  8. Sintaxis inspirada en Markdown: Utiliza una sintaxis simple y fácil de aprender, similar a Markdown.
  9. Exportación: Los diagramas creados pueden exportarse en varios formatos, como PNG, SVG, etc.
  10. Código como diagrama: Permite mantener los diagramas como código, lo que facilita su versionado y mantenimiento.

Editor oficial gratuito de Mermaid.

Claude chat vs chatGPT

En fin, se nota que Claude se está esforzando en superar a competidores como chatGPT. Al día en el que estamos (Julio 2024) su modelo Sonnet 3.5 ya supera a los GPT4 disponibles de OpenAI, y su innovación de los artifacts que generan y ejecutan código interactivo y visual junto al chat, en tiempo real, está siendo un chatGPT killer en toda regla.

A día de hoy ambos generan código, aunque chatGPT no lo ejecuta en pantalla. Aunque es muy posible que implementen esto en su interfaz próximamente. De momento los de Claude (Anthropic) les han adelantado.

Etiquetas : claude | ia | chatgpt

Comentarios 0   Visitas 366  

  Comentarios


Añada su comentario:

Comentario:
Nombre:
(pregunta anti-robots)

Enviar

DÍGANOS QUÉ NECESITA

¡¡ Le respondemos antes de 24h !!
Puede dejarnos su teléfono.

Puede rellenar el formulario (pulsar botón derecha) o bien aquí tiene nuestros datos de contacto.

(pregunta anti-robots)

  Enviar

Revisar consentimientos a cookies