# How to Configure viewBox for Custom Canvas Sizes in Archify > Learn how to configure viewBox for custom canvas sizes in Archify. Easily set your desired dimensions by modifying the viewBox attribute in SVG elements. - Repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) - Tags: how-to-guide - Published: 2026-08-03 --- **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`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html)** at line 4547: Contains a rendered example showing the actual `viewBox` attribute in a generated diagram - **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/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: ```html ``` Modify the width and height values to your desired canvas dimensions: ```html ``` 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`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html). Open the file and locate the SVG definition around line 195: ```html ``` Replace the default values with your preferred dimensions: ```html ``` After modifying the template, run archify's build process to generate new HTML files that inherit these dimensions: ```bash 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: ```css .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: ```css .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`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html)** (line 4547) for immediate changes to existing output files - **Modify [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/examples/web-app.html) at line 4547 or in the template at [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html) line 195. ### Can I set different canvas sizes for different diagrams? Yes. While the template in [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/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`](https://github.com/tt-a1i/archify/blob/main/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.