How to Configure viewBox for Custom Canvas Sizes in Archify

To configure custom canvas sizes in archify, modify the viewBox attribute in the SVG element of your generated HTML files or in the scripts/start-template.html template, using the format viewBox="minX minY width height" to define your desired dimensions.

Archify is an open-source architecture diagramming tool that renders diagrams as scalable SVG graphics. When you need to adjust the visible canvas area of your generated diagrams, you must configure the SVG viewBox attribute, which controls the coordinate system and scaling of the output. This guide demonstrates how to locate and modify this attribute across the tt-a1i/archify codebase to achieve custom canvas dimensions.

Understanding the viewBox Attribute in Archify

The viewBox attribute defines the position and dimension of the SVG viewport. In archify, this attribute determines the coordinate system for all diagram elements and the default visible area when the HTML renders. The repository uses a standard format where four numbers define the minimum x, minimum y, width, and height.

According to the source code analysis, archify typically generates SVG elements with default dimensions similar to viewBox="0 0 720 900". This creates a canvas 720 units wide by 900 units tall, starting at coordinates (0,0). Changing these values expands or contracts the visible canvas without altering the underlying diagram coordinates.

Locating the viewBox Configuration

You can configure the canvas size in two primary locations within the repository:

• examples/web-app.html at line 4547: Contains a rendered example showing the actual viewBox attribute in a generated diagram
• scripts/start-template.html at line 195: Houses the base HTML template used when archify generates new diagrams

For programmatic control, the build logic resides in scripts/build-readme-showcase.mjs, which processes templates and outputs final HTML files.

Method 1: Editing Generated HTML Output

For one-off adjustments to existing diagrams, directly edit the viewBox attribute in the output HTML file.

Locate the SVG element in your generated file:

<!-- Default canvas size found in examples/web-app.html -->
<svg class="archify-diagram" viewBox="0 0 720 900" role="img">
  <!-- diagram content -->
</svg>

Modify the width and height values to your desired canvas dimensions:

<!-- Custom canvas size: 1200x800 -->
<svg class="archify-diagram" viewBox="0 0 1200 800" role="img">
  <!-- diagram content -->
</svg>

This approach updates the visible canvas area immediately, but changes are overwritten if you regenerate the file.

Method 2: Modifying the Source Template

To apply custom canvas sizes to all future diagrams, edit the template file at scripts/start-template.html.

Open the file and locate the SVG definition around line 195:

<svg class="archify-diagram" viewBox="0 0 720 900" role="img">

Replace the default values with your preferred dimensions:

<svg class="archify-diagram" viewBox="0 0 1440 1024" role="img">

After modifying the template, run archify's build process to generate new HTML files that inherit these dimensions:

npm run build

Method 3: Programmatic Configuration via Build Scripts

The scripts/build-readme-showcase.mjs file handles the generation of HTML output from templates. If you need dynamic canvas sizing based on diagram complexity or content, modify this build script to calculate and inject custom viewBox values programmatically.

While the script reads the template and writes the final HTML, you can extend it to accept canvas dimensions as parameters or compute them based on node positions in your architecture definitions.

CSS Considerations for Canvas Scaling

The viewBox attribute works in conjunction with CSS width and height properties. Archify diagrams typically use CSS to control their display size on the page:

.archify-diagram {
  width: 100%;
  height: auto;
}

When you change the viewBox, the SVG scales proportionally to fit the CSS container. To maintain specific pixel dimensions, set explicit CSS values:

.archify-diagram {
  width: 1200px;
  height: 800px;
}

This combination ensures your custom canvas size renders at the intended scale while remaining responsive.

Summary

• Archify uses SVG viewBox to define the canvas coordinate system and visible area in generated diagrams
• Edit examples/web-app.html (line 4547) for immediate changes to existing output files
• Modify scripts/start-template.html (line 195) to set default canvas sizes for all future generations
• Use viewBox="0 0 width height" syntax where width and height represent your desired canvas dimensions
• Combine with CSS width and height properties to control the final rendered size on screen

Frequently Asked Questions

What is the default viewBox size in archify?

The default viewBox in archify is typically 0 0 720 900, creating a canvas 720 units wide by 900 units tall. You can verify this in examples/web-app.html at line 4547 or in the template at scripts/start-template.html line 195.

Can I set different canvas sizes for different diagrams?

Yes. While the template in scripts/start-template.html sets a project-wide default, you can override the viewBox attribute in individual generated HTML files after creation. For dynamic sizing, modify scripts/build-readme-showcase.mjs to calculate dimensions based on specific diagram content before writing the output.

Does changing the viewBox affect the diagram's internal layout?

No. Changing the viewBox only alters the visible canvas area and coordinate system scaling. The internal positioning of nodes, edges, and components remains unchanged. However, if you reduce the viewBox dimensions significantly, parts of the diagram may fall outside the visible area unless you also adjust the camera position or scaling.

Where is the viewBox defined in the source templates?

The viewBox is defined in scripts/start-template.html at approximately line 195. This template serves as the foundation for all HTML output generated by archify, making it the appropriate location for project-wide canvas size configuration.

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