PowerBuilder
PowerBuilder 2025 R2: Renderizado Dinámico de Diagramas con Mermaid
0 visualizaciones
Cómo integrar Mermaid.js en tus aplicaciones PowerBuilder para generar diagramas al vuelo utilizando el control WebBrowser y Data URIs, sin depender de archivos temporales.
Detalles
Introducción
La visualización de procesos, arquitecturas y flujos de datos es fundamental en el software empresarial. Herramientas como Mermaid.js permiten definir diagramas (como flujogramas, diagramas de secuencia, Gantt, etc.) utilizando una sintaxis basada en texto simple. Integrar esta capacidad directamente en PowerBuilder enriquece la experiencia del usuario y facilita la generación dinámica de gráficos a partir de datos estructurados.
El proyecto Demo_uso_mermaid_pb demuestra cómo encapsular la lógica de Mermaid.js en un objeto no visual (NVO) y mostrar el resultado instantáneamente en un control WebBrowser. Todo esto se logra generando URIs de datos (Data URIs) codificadas en Base64, eliminando la necesidad de crear, gestionar y limpiar archivos temporales HTML en el disco del cliente.
El valor técnico de esta solución radica en su limpieza y portabilidad: el NVO construye el HTML necesario, lo convierte a Base64 y lo inyecta directamente en el control WebBrowser, garantizando una ejecución rápida y sin rastros en el sistema de archivos.
Ventana principal del demo: captura de sintaxis Mermaid y renderizado en tiempo real en el control WebBrowser.
Arquitectura del demo
El proyecto mantiene una estructura simple con responsabilidades bien definidas:
Flujo de ejecución completo
• El usuario ingresa o edita la sintaxis de texto de Mermaid en el control mle_sintaxis.
• Al presionar el botón Renderizar, la ventana captura el texto y crea una instancia de nvo_manejador_mermaid.
• Se invoca el método of_generar_archivo_html pasando el código Mermaid como argumento.
• El NVO construye un documento HTML completo en memoria, que incluye la biblioteca Mermaid desde un CDN y el código del diagrama.
• El documento HTML se convierte a un Blob con codificación UTF-8 y se codifica en Base64 utilizando CoderObject.
• El NVO devuelve una cadena con el formato Data URI: data:text/html;charset=utf-8;base64,....
• La ventana llama a la función Navigate del control wb_visor (WebBrowser) utilizando el URI generado, mostrando el gráfico instantáneamente.
Paso 1: Interfaz de usuario e interacción
En el evento clicked del botón, el código recoge el texto de entrada, invoca el NVO y se encarga de la navegación del WebBrowser. Es un proceso directo y sincrónico.
1event clicked;2nvo_manejador_mermaid lnvo_mermaid3String ls_codigo, ls_uri45// Obtener el codigo escrito por el usuario6ls_codigo = mle_sintaxis.Text78IF Trim(ls_codigo) = "" THEN9 MessageBox("Aviso", "Por favor ingresa la sintaxis de Mermaid.")10 RETURN11END IF1213// Instanciar el NVO y generar la URI14lnvo_mermaid = CREATE nvo_manejador_mermaid15ls_uri = lnvo_mermaid.of_generar_archivo_html(ls_codigo)16DESTROY lnvo_mermaid1718// Renderizar en el control WebBrowser19IF ls_uri <> "" THEN20 wb_visor.Navigate(ls_uri)21ELSE22 MessageBox("Error", "No se pudo generar la URI local.")23END IF24end event
Paso 2: Generación del documento HTML dinámico
La magia reside en la función of_generar_archivo_html del objeto nvo_manejador_mermaid. En lugar de escribir a un archivo físico, construimos una estructura HTML en una variable String. Se incluye el script de Mermaid desde un CDN (https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js) y se llama a mermaid.initialize() para renderizar los div con clase mermaid.
1String ls_html23// 1. Definir la plantilla HTML con el CDN de Mermaid4ls_html = "<!DOCTYPE html><html><head><meta charset='utf-8'>"5ls_html += "<style>body { font-family: sans-serif; background-color: #f9f9f9; padding: 20px; }</style>"6ls_html += "<script src='https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js'></script>"7ls_html += "<script>mermaid.initialize({startOnLoad:true});</script>"8ls_html += "</head><body>"9ls_html += "<h3>Diagrama Mermaid</h3>"10ls_html += "<div class='mermaid'>" + as_codigo_mermaid + "</div>"11ls_html += "</body></html>"
Paso 3: Conversión a Base64 y Data URI
Para evitar la manipulación de archivos temporales (que puede provocar problemas de permisos, bloqueos de antivirus o fragmentación en disco), el código transforma la cadena HTML a un objeto de tipo Blob utilizando EncodingUTF8!. A continuación, utiliza el objeto nativo CoderObject de PowerBuilder para generar una representación en Base64.
1String ls_base642Blob lblb_html3CoderObject lnv_coder45// 2. Codificar en Base64 para usar Data URI (evita crear archivos locales)6lnv_coder = CREATE CoderObject7lblb_html = Blob(ls_html, EncodingUTF8!)8ls_base64 = lnv_coder.Base64Encode(lblb_html)9DESTROY lnv_coder1011// 3. Retornar la URL de datos12Return "data:text/html;charset=utf-8;base64," + ls_base64
Extensibilidad: Galería y personalización de temas
El NVO también ofrece una función adicional, of_generar_galeria_html, pensada para construir reportes o galerías que agrupen múltiples diagramas. Este enfoque demuestra la flexibilidad de Mermaid, inyectando hojas de estilo personalizadas para un tema oscuro, fuentes como Segoe UI e integrando iconos mediante Font Awesome.
Se configura Mermaid de forma explícita al inicializarlo, pasando variables de tema que ajustan los colores al estilo deseado, lo que permite a las aplicaciones PowerBuilder integrar diagramas de manera armónica con su propia estética visual (modo oscuro, colores corporativos).
Aplicaciones prácticas
• Visualización de Procesos: Transformar dinámicamente el estado de un registro de base de datos en un diagrama de flujo interactivo sin depender de costosos componentes de terceros.
• Documentación en línea: Mostrar relaciones entre entidades (ERD) generadas directamente a partir del esquema consultado.
• Seguimiento de Tareas: Representar cronogramas o Diagramas de Gantt calculados a partir de los DataWindows en ejecución.
• Reportes modernos: Embeber la salida Data URI en reportes para su eventual exportación como PDF enriquecido o HTML interactivo.
Conclusión
La combinación del control WebBrowser de PowerBuilder 2025 R2, CoderObject y el esquema de Data URIs abre una ventana muy poderosa de integración con bibliotecas JavaScript modernas como Mermaid.js.
Demo_uso_mermaid_pb establece una base arquitectónica sólida y reutilizable: aislando la lógica de composición HTML en un NVO, simplificamos el código de nuestras ventanas y abrimos la puerta a implementaciones mucho más avanzadas donde los gráficos se generan al vuelo basados en el estado de la aplicación, sin sacrificar rendimiento ni llenar de residuos el sistema operativo.