Renderers Available in Archify for Diagram Types: Complete Guide to SVG, Canvas, PDF, and Third-Party Outputs

Archify provides six specialized renderers—SVGRenderer, CanvasRenderer, PDFRenderer, PNGRenderer, MermaidRenderer, and PlantUMLRenderer—that convert internal diagram models into scalable vector graphics, raster images, printable documents, or third-party syntax outputs.

The tt-a1i/archify repository implements a flexible rendering pipeline for architecture diagrams. Understanding the renderers available in Archify for diagram types ensures you export your visualizations in the optimal format for web embedding, printing, or integration with existing documentation workflows.

Built-in Core Renderers

Archify ships with four primary renderers located in src/renderers/. Each targets specific output requirements and diagram complexity levels.

SVGRenderer for Scalable Vector Output

Located in src/renderers/svg-renderer.ts, this renderer generates high-quality SVG markup suitable for flowcharts, class diagrams, and state machines. The SVG output maintains crisp edges at any zoom level, making it ideal for responsive web documentation.

CanvasRenderer for Interactive Raster Graphics

The src/renderers/canvas-renderer.ts implementation uses the HTML5 Canvas API to produce fast raster renders. This renderer excels at large-scale architecture maps and heatmaps where real-time preview performance matters more than infinite scalability.

PDFRenderer for Printable Documentation

When you need page-oriented output, src/renderers/pdf-renderer.ts creates print-ready documents. This renderer handles pagination and vector preservation, producing architecture blueprints suitable for technical specification documents.

PNGRenderer for Quick Static Exports

For thumbnails and quick-share snapshots, src/renderers/png-renderer.ts provides lightweight raster export without the overhead of canvas initialization. Use this for small diagrams requiring immediate portability.

Optional Plugin Renderers

Beyond the core set, Archify supports optional renderers that wrap third-party diagramming engines to extend compatibility.

MermaidRenderer for Text-Based Diagrams

Implemented in src/renderers/mermaid-renderer.ts, this renderer processes Mermaid-syntax diagrams directly. It converts text-based flowcharts, Gantt charts, and sequence diagrams into SVG or PNG without manual layout configuration.

PlantUMLRenderer for UML Standards

The src/renderers/plantuml-renderer.ts wrapper integrates PlantUML support for classic UML diagram types including class, component, and deployment diagrams. This bridges Archify with existing PlantUML toolchain investments.

How to Select the Right Renderer for Your Diagram

Choosing the appropriate renderer depends on your distribution medium and diagram complexity.

• SVGRenderer: Best for flowcharts and class diagrams requiring web integration and infinite scalability.
• CanvasRenderer: Optimal for real-time architecture maps exceeding 1000 nodes where interaction speed dominates.
• PDFRenderer: Required for documentation artifacts needing physical printing or archival standards.
• PNGRenderer: Suitable for email attachments and chat platform sharing where simplicity matters.
• MermaidRenderer: Use when importing existing Mermaid definitions from legacy documentation.
• PlantUMLRenderer: Essential for teams standardizing on PlantUML notation for UML compliance.

Implementation Examples

Each renderer follows a consistent instantiation pattern, accepting a diagram instance and optional configuration parameters.

Rendering to SVG

import { Archify, SVGRenderer } from 'archify';

const arch = new Archify();
const diagram = arch.createDiagram('flowchart')
                    .addNode('Start')
                    .addNode('Process')
                    .addEdge('Start', 'Process');

const svg = new SVGRenderer(diagram).render();
document.body.innerHTML = svg;

Exporting High-Resolution PNG

import { Archify, CanvasRenderer } from 'archify';

const arch = new Archify();
const map = arch.loadDiagram('architecture.json');
const canvas = new CanvasRenderer(map, { width: 1920, height: 1080 });

canvas.render().then(blob => {
  const url = URL.createObjectURL(blob);
  const img = new Image();
  img.src = url;
  document.body.appendChild(img);
});

Generating Printable PDFs

import { Archify, PDFRenderer } from 'archify';

const arch = new Archify();
const compDiagram = arch.createDiagram('component')
                        .addComponent('UI')
                        .addComponent('API')
                        .connect('UI', 'API');

const pdf = new PDFRenderer(compDiagram).render();
pdf.save('component-diagram.pdf');

Using Third-Party Syntax Renderers

import { MermaidRenderer } from 'archify/renderers/mermaid';

const mermaidSource = `
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]
`;

const svg = new MermaidRenderer(mermaidSource).render();
document.body.innerHTML = svg;

Summary

• Archify provides six distinct renderers located in src/renderers/ for different output requirements.
• SVGRenderer (svg-renderer.ts) generates scalable vector graphics for web embedding and flowcharts.
• CanvasRenderer (canvas-renderer.ts) produces high-performance raster output for complex interactive diagrams.
• PDFRenderer (pdf-renderer.ts) creates page-oriented documents suitable for printing architecture blueprints.
• PNGRenderer (png-renderer.ts) offers lightweight static image export for quick sharing and thumbnails.
• MermaidRenderer (mermaid-renderer.ts) and PlantUMLRenderer (plantuml-renderer.ts) provide compatibility with text-based diagram syntaxes.
• Each renderer accepts a diagram instance and returns format-specific output through a standardized .render() method.

Frequently Asked Questions

What is the default renderer in Archify?

Archify defaults to SVGRenderer for new diagram instances unless explicitly overridden. This ensures maximum compatibility across devices and screen densities while maintaining small file sizes for network transmission.

Can I use multiple renderers on the same diagram instance?

Yes. Archify's diagram model is immutable and renderer-agnostic. You can instantiate SVGRenderer, CanvasRenderer, and PDFRenderer against the same diagram object to generate parallel outputs in different formats without redefining the diagram structure.

How do I install optional renderers like MermaidRenderer?

Optional renderers reside in the archify/renderers/ namespace but may require additional peer dependencies. Import MermaidRenderer from archify/renderers/mermaid and ensure the Mermaid library is installed in your project environment before instantiation.

Which renderer produces the smallest file size for web deployment?

SVGRenderer typically generates the smallest payload for diagram types with fewer than 500 elements, as vector paths compress efficiently via Gzip. For photographic-style architecture maps with gradients, PNGRenderer often produces smaller files than SVG equivalents.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}