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

> Explore Archify's renderers for diagrams: SVG, Canvas, PDF, PNG, Mermaid, and PlantUML. Convert models to various formats with this comprehensive guide.

- Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify)
- Tags: deep-dive
- Published: 2026-08-29

---

**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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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

```javascript
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

```javascript
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

```javascript
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

```javascript
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`](https://github.com/tt-a1i/archify/blob/main/svg-renderer.ts)) generates scalable vector graphics for web embedding and flowcharts.
- **CanvasRenderer** ([`canvas-renderer.ts`](https://github.com/tt-a1i/archify/blob/main/canvas-renderer.ts)) produces high-performance raster output for complex interactive diagrams.
- **PDFRenderer** ([`pdf-renderer.ts`](https://github.com/tt-a1i/archify/blob/main/pdf-renderer.ts)) creates page-oriented documents suitable for printing architecture blueprints.
- **PNGRenderer** ([`png-renderer.ts`](https://github.com/tt-a1i/archify/blob/main/png-renderer.ts)) offers lightweight static image export for quick sharing and thumbnails.
- **MermaidRenderer** ([`mermaid-renderer.ts`](https://github.com/tt-a1i/archify/blob/main/mermaid-renderer.ts)) and **PlantUMLRenderer** ([`plantuml-renderer.ts`](https://github.com/tt-a1i/archify/blob/main/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.