How to Set Default Font Size in draw.io (diagrams.net)

If you regularly design software architecture diagrams, flowcharts, enterprise infrastructure maps, or database schemas in draw.io (also known as diagrams.net), you have likely faced a recurring friction point: every single time you drag a new rectangle, circle, process node, or connector line onto your canvas, the font size resets back to the application’s default 12px or 14px size.

Manually adjusting font sizes for dozens of individual text labels across a complex architecture diagram drains creative momentum and introduces typography inconsistencies. Fortunately, draw.io provides two powerful, built-in mechanisms to completely eliminate this repetitive manual work:

1. Per-Diagram Default Style (Ctrl + Shift + D / Cmd + Shift + D): Instantly reconfigures the default font size, font family, text alignment, line height, and shape styling for all newly added elements on your current active canvas session.
2. Global JSON Configuration (defaultVertexStyle & defaultEdgeStyle): Persists your preferred font size, line spacing, font family, stroke width, and color palette parameters globally across every future diagram you open or create in web browsers, desktop apps, VS Code extensions, or Atlassian Confluence/Jira team workspaces.

This comprehensive guide breaks down both methods step-by-step with practical JSON copy-paste snippets, keyboard shortcut cheat tables, enterprise admin policies, and troubleshooting steps for individual developers and engineering teams alike.

How Do You Set Default Font Size for the Current Diagram in draw.io?

Method 1: The “Set as Default Style” Workflow

When working on a single diagram or editing an existing architectural layout, you can reconfigure the default text properties for the active canvas without touching system settings.

Achievables & Outcomes

• Scope: Active diagram canvas session.
• Time Required: Less than 10 seconds.
• Persistence: Saved directly inside the active .drawio, .svg, or .png file metadata headers.

Step 1: Create and Format Your Benchmark Element

1. Drag a shape (such as a Rectangle, Process Node, or Database Entity) or a standalone Text Box onto the draw.io canvas.
2. Click to select the element.
3. On the right-hand inspector panel, click the Text tab.
4. Adjust the Font Size numerical input to your target value (for example, 16).
5. Optionally adjust accompanying text attributes such as Font Family (e.g., Helvetica, Inter, or Fira Code), Font Color, Alignment, Word Wrap, or Line Height.

Image Prompt: A clean sketch note style technical illustration showing Method 1 in draw.io. Step 1 selects shape and changes font size to 16px in Format Panel. Step 2 shows right-click context menu highlighting Set as Default Style with keyboard shortcut Ctrl+Shift+D badge. Step 3 shows new shapes automatically adopting 16px font size. Warm cream paper background, graphite line art, blue and yellow highlight accents.

Step 2: Register the Style as Canvas Default

With your formatted shape still selected, apply one of the following actions:

• Keyboard Shortcut: Press Ctrl + Shift + D on Windows/Linux, or Cmd + Shift + D on macOS.
• Context Menu: Right-click the shape, navigate to the context menu, and click Set as Default Style.
• Top Menu Bar: Select Edit -> Set as Default Style from the main menu bar.

Step 3: Verify Automated Inheritance

Drag a fresh shape from the left-hand Shape Library onto the canvas, or double-click on any blank canvas area to create a text node. Type your label—the newly generated element will immediately render with your 16px font size.

How Do You Configure Global Default Font Size Across All Future Diagrams in draw.io?

Method 2: Global JSON Configuration via Settings

If you construct diagrams daily, applying Set as Default Style on every new file quickly becomes repetitive. Configuring draw.io’s global JSON schema allows you to override default application styles permanently across all sessions and application launches.

Achievables & Outcomes

• Scope: All future diagrams created on your browser profile or desktop installation.
• Time Required: 1 to 2 minutes.
• Persistence: Persisted in browser localStorage and application configuration preferences.

Image Prompt: A technical sketch note diagram illustrating Method 2 Global JSON Configuration in draw.io. Shows clicking the Settings gear icon, opening the Configuration JSON modal, pasting defaultVertexStyle and defaultEdgeStyle JSON blocks, and clicking Apply. Graphite ink outlines, green and orange pastel highlights, cream background.

Step 1: Open the Global Configuration Editor

1. In the top-right corner of the draw.io window (next to the Help menu), click the Gear Icon (Settings ⚙️).
2. From the dropdown list, click Configuration.
3. A modal dialog titled Configuration will appear containing a JSON text editor.

Step 2: Paste the Default Font Size JSON Payload

Paste the following structured JSON snippet into the editor window. If your configuration editor already contains JSON key-value pairs, merge these properties into your existing root JSON object:

{
  "defaultVertexStyle": {
    "fontSize": 16,
    "fontFamily": "Helvetica",
    "fontColor": "#1A202C"
  },
  "defaultEdgeStyle": {
    "fontSize": 14,
    "fontFamily": "Helvetica",
    "fontColor": "#2D3748"
  }
}

Understanding the Configuration Attributes

• defaultVertexStyle: Defines default visual and typography parameters for all geometric shapes, process boxes, decision diamonds, and standalone text blocks.
• defaultEdgeStyle: Defines default visual and typography parameters for all arrow connectors, relationships, and line labels.
• fontSize: Numerical value setting the text height in pixels (e.g., 16 for 16px).
• fontFamily: Standard CSS font family string (e.g., "Helvetica", "Inter", "Arial").
• fontColor: Hexadecimal color code for default text rendering.

Step 3: Apply and Test Permanence

1. Click the Apply button at the bottom of the Configuration dialog.
2. Refresh your browser tab or restart the draw.io desktop app.
3. Open a brand-new blank diagram (File -> New).
4. Drag any shape onto the canvas and start typing. The text will render automatically in 16px Helvetica.

What Are the Best JSON Configuration Options for Fonts and Styles in draw.io?

Enterprise Developer Production JSON Template

Here is an expanded, production-tested JSON configuration payload used by software architecture teams to enforce clean, readable diagram defaults across design sprints:

{
  "defaultVertexStyle": {
    "fontSize": 16,
    "fontFamily": "Inter, Helvetica, Arial, sans-serif",
    "fontColor": "#1E293B",
    "strokeColor": "#334155",
    "fillColor": "#F8FAFC",
    "rounded": 1,
    "absoluteArcSize": 1,
    "arcSize": 8
  },
  "defaultEdgeStyle": {
    "fontSize": 14,
    "fontFamily": "Inter, Helvetica, Arial, sans-serif",
    "fontColor": "#475569",
    "strokeColor": "#64748B",
    "strokeWidth": 2,
    "edgeStyle": "orthogonaledgeStyle",
    "curved": 0,
    "rounded": 1
  },
  "fontNames": [
    "Helvetica",
    "Inter",
    "Fira Code",
    "Roboto",
    "Comic Sans MS"
  ],
  "customFonts": [
    {
      "name": "Inter",
      "url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
    },
    {
      "name": "Fira Code",
      "url": "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap"
    }
  ]
}

Key Style Parameters Cheat Sheet

How Do You Fix Default Font Size Issues in VS Code draw.io Extension and Confluence?

Image Prompt: A technical infographic showing VS Code draw.io extension customGlobalConfig integration alongside Atlassian Confluence draw.io admin configuration settings tab. Sketch note doodle style, graphite line art, cream paper background.

1. VS Code Draw.io Integration (hediet.vscode-drawio)

If you use Henning Dieterichs’ popular Draw.io Integration extension in Visual Studio Code (.drawio or .drawio.svg files), the standard web Settings gear icon is hidden from the main UI.

To set global font sizes inside VS Code:

1. Open VS Code Settings (Ctrl + , or Cmd + ,).
2. Search for drawio.customGlobalConfig.
3. Click Edit in settings.json.
4. Add your configuration under the hediet.vscode-drawio.customGlobalConfig key:

{
  "hediet.vscode-drawio.customGlobalConfig": {
    "defaultVertexStyle": {
      "fontSize": 16,
      "fontFamily": "Fira Code"
    },
    "defaultEdgeStyle": {
      "fontSize": 14
    }
  }
}

5. Save settings.json. All .drawio diagrams opened in VS Code will now enforce your custom font rules automatically.

2. Atlassian Confluence & Jira Enterprise Workspaces

In corporate Confluence or Jira environments where draw.io is deployed as an app plugin, space administrators can standardize font sizes across the entire organization to maintain uniform documentation standards.

Admin Instructions:

1. Log into Confluence as a Space Administrator or System Administrator.
2. Go to Confluence Administration -> draw.io Configuration.
3. Select the Configuration tab.
4. Paste your team’s global JSON rules (defaultVertexStyle, defaultEdgeStyle, customFonts).
5. Click Save Configuration.

Every employee creating or editing a diagram within Confluence pages will automatically start with standardized team font sizes, custom organization fonts, and unified brand colors. This ensures that system architecture documents, network diagrams, and API integration maps maintain a clean, professional aesthetic across all engineering and product teams without requiring manual styling checks.

Keyboard Shortcuts Cheat Sheet for draw.io Typography & Styling

Mastering keyboard shortcuts accelerates diagram creation significantly. Here are the essential styling shortcuts in draw.io:

Troubleshooting Common draw.io Font Size & Styling Issues

Issue 1: “Set as Default Style” Stops Working After Opening a New File

Cause: Set as Default Style (Ctrl + Shift + D) is a per-diagram session rule. It is saved inside the specific file XML/SVG header, but does not transfer when opening a completely new tab.
Fix: Use Method 2 (Global JSON Configuration) to save the rules to your browser localStorage or desktop config file.

Issue 2: Custom JSON Configuration Fails to Apply

Cause: Invalid JSON syntax (e.g., trailing commas, unquoted keys, or missing curly braces).
Fix: Validate your JSON snippet before clicking Apply. Ensure numbers like 16 do not have quotes ("fontSize": 16, not "fontSize": "16").

Issue 3: Text Shrinks or Overflows When Resizing Shapes

Cause: “Formatted Text” or “Word Wrap” options are disabled on the shape style.
Fix: Select the shape, open the Text tab in the Format Panel, and ensure both Word Wrap and Formatted Text checkboxes are enabled.

Frequently Asked Questions

Can I set different default font sizes for boxes and arrow lines in draw.io?

Yes. In Method 1, select a box, set its font size to 16px, and press Ctrl+Shift+D. Then select an arrow line, set its font size to 14px, and press Ctrl+Shift+D. In Method 2 (Global JSON), specify "fontSize": 16 inside defaultVertexStyle (for boxes) and "fontSize": 14 inside defaultEdgeStyle (for arrows).

Where does draw.io store global JSON configuration settings?

In web browsers (app.diagrams.net), configuration settings are stored in your browser’s localStorage under the key DRAWIO_CONFIG. In the desktop application, preferences are stored in your user profile directory configuration JSON file.

How do I reset draw.io font sizes back to factory defaults?

To clear a per-diagram style, select any element and press Ctrl + Shift + R (Cmd + Shift + R on Mac), or choose Edit -> Clear Default Style. To reset global configuration, open Settings (Gear Icon) -> Configuration, delete your custom JSON payload, and click Apply.

Why is my custom Google Font not rendering in exported PDF or PNG files?

External web fonts (like Google Fonts) render on canvas via web font embedding. When exporting to PDF or PNG, draw.io’s server SVG renderer needs embedded base64 font definitions. To ensure export consistency, configure your font using the customFonts array in JSON configuration.

How do I set default font size in the draw.io VS Code extension?

Open VS Code Settings (Ctrl+,), search for drawio.customGlobalConfig, and paste your JSON rules containing defaultVertexStyle: { fontSize: 16 } into the setting block.

What to Read Next

• Figma Keyboard Shortcuts Cheat Sheet — Speed up your UI/UX design workflow with essential keyboard shortcuts written by darsh.
• The Ultimate YouTube Keyboard Shortcuts Cheat Sheet — Master precise video navigation and playback shortcuts.
• VS Code Keyboard Shortcuts & Productivity Guide — Supercharge your coding workspace efficiency.