Skip to content

Export diagrams to multiple formats (PNG, JPG, PDF, SVG) #97

Description

@DataDave-Dev

🇪🇸 Español

Actualmente el diagrama generado solo se puede ver dentro de la app; no hay forma de exportarlo o compartirlo fuera de la herramienta. Sería muy útil poder descargar el call graph en distintos formatos para documentación, issues, presentaciones, etc.

Propuesta: Agregar un botón de exportación en el diagrama (React Flow) que permita descargar la vista actual en varios formatos:

  • PNG (con fondo transparente y opaco)
  • JPG
  • SVG (vectorial)
  • PDF

Notas de implementación:

  • React Flow ya expone helpers (getNodesBounds, getViewportForBounds) y se integra bien con html-to-image para PNG/JPG/SVG.
  • Para PDF se puede componer sobre el PNG/SVG generado (p. ej. jspdf) o exportar el SVG y convertir.
  • Exportar todo el grafo (no solo lo visible en el viewport), respetando el tema actual (claro/oscuro).
  • Idealmente un menú dentro del Panel existente del diagrama.

Archivos: src/components/ui/Diagram.tsx

Solución sugerida: Añadir un control de exportación que use html-to-image para generar PNG/JPG/SVG a partir del viewport completo del grafo, y jspdf para el PDF. Permitir elegir formato y respetar el tema activo.


🇬🇧 English

Right now the generated diagram can only be viewed inside the app; there is no way to export or share it outside the tool. Being able to download the call graph in different formats would be very useful for documentation, issues, presentations, etc.

Proposal: Add an export button to the diagram (React Flow) that lets users download the current view in several formats:

  • PNG (transparent and opaque background)
  • JPG
  • SVG (vector)
  • PDF

Implementation notes:

  • React Flow already exposes helpers (getNodesBounds, getViewportForBounds) and pairs well with html-to-image for PNG/JPG/SVG.
  • For PDF, compose over the generated PNG/SVG (e.g. jspdf) or export the SVG and convert.
  • Export the whole graph (not just what's visible in the viewport), honoring the current theme (light/dark).
  • Ideally a menu inside the diagram's existing Panel.

Files: src/components/ui/Diagram.tsx

Suggested fix: Add an export control that uses html-to-image to generate PNG/JPG/SVG from the full graph viewport, and jspdf for PDF. Let users pick the format and respect the active theme.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions