← Back
Work with Templates
← Back to Academy

Work with Templates

Create reusable style presets that instantly apply to nodes, maintaining consistency and speeding up diagram creation by 10x

featuresintermediate⏱️6 min
Home/Documentation/Work with Templates

Create reusable style presets that instantly apply to nodes, maintaining consistency and speeding up diagram creation by 10x

Academy/
TemplatesDocumentation

Work with Templates

Imagine styling 50 database nodes manually: click, pick color, add icon, adjust size... 15 minutes later, you're only halfway done. Now imagine: one click, all 50 styled instantly. That's the power of templates.

Think: Rubber Stamp for Styles

💡 Mental Model: Templates work like rubber stamps. Design the stamp once, then stamp identical copies instantly. Update the stamp, all copies change.

If you know CSS classes, you already understand templates: Define a style once → Apply to many elements → Change once, update everywhere.

Templates in Action

One click creates a fully-styled node. Try dragging it around!

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

⚡ A database template instantly applies: green color, database icon, and styling

What You'll Master

Create Templates

Build reusable style presets in 30 seconds

Apply Instantly

Style new or existing nodes with one click

Update Globally

Edit one template, update 100+ nodes at once

The Problem Templates Solve

The Manual Styling Pain

Meet Sarah: She's documenting a microservices architecture with 30 services and 12 databases. Without templates, she spends:

**20 minutes** styling each database node identically (green, database icon, medium text)

**30 minutes** making all API nodes look the same (blue, API icon, large text)

**15 minutes** fixing inconsistencies when she spots a better color scheme

Total time wasted: 65 minutes. Plus, the diagram still has inconsistent styling from manual errors.

The Cost of Manual Work

⏱️ Manual styling = slow, error-prone, and frustrating. Your brain should focus on architecture, not remembering which shade of blue you used.

The Templates Solution

Sarah tries templates: She creates 3 templates (Database, API, Frontend) in 2 minutes. Now:

Creating 12 database nodes: 12 clicks = **30 seconds**

Creating 30 API nodes: 30 clicks = **1 minute**

Changing color scheme: Edit 3 templates = **30 seconds**

30x Faster with Zero Errors

✨ 2 minutes total vs 65 minutes. Sarah saves 63 minutes and gets perfect consistency. She spends that time on architecture instead.

Sarah has 50 database nodes. She realizes they should be dark green instead of light green. With templates, how long does this take?

5-10 minutes (manually change each node)
30 seconds (edit the Database template once)
2 minutes (select all and bulk edit)
Impossible without recreating nodes
Core Concepts

Templates = 3 Simple Parts

Stop thinking about individual properties. Think in 3 mental chunks:

1. Visual Identity

Color + Icon = instant recognition at a glance

2. Text Style

Font size + weight = visual hierarchy

3. Documentation

Name + description = team understanding

See the Difference

Different templates create instant visual patterns. Your brain categorizes them automatically:

Template Visual Identity

Each template has a unique color + icon combination for instant recognition

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

🎨 Database (green), API (blue), Frontend (purple), External (orange) - instantly recognizable!

Your eyes instantly categorize these. That's the power of consistent visual identity.

Example: Building a "Redis Cache" Template

Worked Example

Let's build this step-by-step:

  1. Visual Identity:

    • Color: Orange (caches stand out from databases)
    • Icon: Database icon (it's storage-related)

  2. Text Style:

    • Font: Large (caches are critical infrastructure)

  3. Documentation:

    • Name: "Redis Cache"
    • Description: "Use for Redis, Memcached, or in-memory caches"

Result: Anyone on your team instantly knows orange nodes = caches. They click the template and get consistent styling.

You're creating a "MongoDB Database" template. Which properties define its Visual Identity?

Name and Description
Font size and weight
Color and Icon
All of the above

Common Template Patterns

Most teams use these proven color patterns. Here's a complete architecture using template-based color coding:

Template Color Patterns in Action

A microservices architecture using consistent template styling

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

🎨 Green = Data, Blue = Services, Purple = Frontend, Orange = External - instant visual organization!

The 80/20 Template Set

💡 Pro Move: Define these 4 templates at project start. You'll cover 80% of your architecture needs instantly.

Guided Practice

Step-by-Step: "PostgreSQL Database" Template

Active Practice Ahead

Learning by doing: Follow along and create this template. We'll explain every choice so you understand why, not just how.

Step 1: Open Template Creator

•

Click **"Templates"** in the floating action bar

This opens the templates panel showing all available templates

•

Click **"New template"** button

Opens the template configuration dialog

Alternative: Press Cmd/Ctrl + K and search "Create template" (faster!).

Step 2: Configure Visual Identity

•

Name: **"PostgreSQL Database"**

✓ Specific (not just "Database") ✓ Includes tech (PostgreSQL) ✓ Short (2-3 words)

•

Color: **Green** (#22c55e)

Why green? Databases = data storage = natural "growth" = green (memorable!)

•

Icon: **Database**

Universal symbol for databases - instant recognition

Step 3: Configure Text Style

•

Font Size: **Medium**

Databases are important but not top-level (save "Large" for systems/apps)

Step 4: Add Documentation

•

Description: **"Use for PostgreSQL instances and replicas"**

Helps team know exactly when to use this template

•

Click **"Create"**

Template is now saved and appears in your templates panel

Template Created!

You did it! You just created a production-ready template. Now anyone on your team can create perfectly-styled PostgreSQL nodes with one click.

Try It: Use Your Template

•

Open the Templates panel (if closed)

You should see your "PostgreSQL Database" template

•

Click the template card

✨ A new node appears with green color, database icon, medium text!

•

Edit the label to **"Users DB"**

Customize the instance name while keeping the template styling

What just happened? You went from idea → styled node in 3 clicks (vs 10+ clicks manually). That's the power of templates.

You create 5 nodes using the "PostgreSQL Database" template. Then you realize the color should be darker green. What's the FASTEST way?

Manually change color on all 5 nodes
Delete all nodes and recreate them
Edit the template once - all 5 update automatically
Select all 5 and bulk edit
Productivity Techniques

Power Move #1: Bulk Styling Existing Nodes

Scenario: You have 15 unstyled nodes that should all be databases. You could style each one manually (20 minutes). Or...

•

Select all 15 nodes

Hold Shift and click each node (or Cmd/Ctrl + A for all canvas nodes)

•

Open Templates panel

Your template cards now show "Apply to selected" buttons

•

Click "Apply to selected" on Database template

💥 All 15 nodes instantly get database styling

Bulk Operations Are Magic

⚡ 15 nodes styled in 5 seconds. This is how you style large diagrams without losing your mind.

Before & After: Bulk Template Application

All these nodes can be styled instantly by applying a template to the selection

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

💡 Imagine: Select all 6 nodes → Click "Apply Database Template" → Done in 2 seconds!

Power Move #2: Global Theme Updates

Scenario: Your team decides to rebrand. All database nodes need to change from light green to dark green. You have 40 database nodes across 5 diagrams.

•

Open Templates panel

Find your "Database" template

•

Click the edit icon (pencil)

Template editor opens

•

Change color from light green → dark green

Pick new color: #166534

•

Click "Save"

🎨 All 40 nodes across all diagrams update instantly!

Use Carefully

With great power... Template edits are global and instant. Make sure you want to update ALL nodes before saving.

Global Template Updates

All these nodes use the same template. Edit the template once, all update instantly!

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.
Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.
Interactive

🎨 Edit the "API Service" template → All 8 nodes update automatically across all diagrams

You have 100 nodes using "API Service" template across 10 diagrams. You change the icon. How many diagrams do you need to open to see the change?

All 10 diagrams (need to manually update each)
Just 1 diagram (change propagates on reload)
Zero - changes appear instantly in all open diagrams
Need to refresh each diagram manually

Organizing Templates

**Start small:** Create 5-8 core templates before building diagrams

**Name clearly:** "MongoDB Database" > "Database" > "DB"

**Use patterns:** Stick to consistent color coding (green = data, blue = services)

**Delete unused:** Keep the panel clean - delete experimental templates

**Document well:** Good descriptions help teammates pick the right template

Recommended Starting Set

🎯 Template Starter Pack: Create these 5 first: Database (green), API Service (blue), Frontend (purple), External API (orange), Queue (yellow). Covers 80% of needs.

Cheat Sheet

3-Minute Cheat Sheet

Creating Templates

•

Templates → New template

•

Set: Name, Color, Icon, Font Size, Description

•

Click "Create"

Using Templates

•

**New nodes:** Click template card in panel

•

**Existing nodes:** Select nodes → "Apply to selected"

Editing Templates

•

Templates panel → Click edit icon (pencil)

•

Modify properties → Save

•

All nodes using template update instantly

Keyboard Shortcuts

Quick Access

Summary

Template Master!

Skills Unlocked!

What you can do now:

Create templates in 30 seconds with the right visual identity
Apply templates to new or existing nodes with one click
Update globally - edit once, change 100+ nodes instantly
Organize efficiently - use the 5-template starter pack

Your next project: Before building a large diagram, spend 2 minutes creating 5-8 core templates. You'll save hours of styling work.

6 of 10

Related Articles

9 m

Master Virtual Nodes

Create cross-level connections with virtual node references

featuresintermediate
8 m

Link External Resources

Connect diagrams to GitHub repositories and Figma designs

featuresintermediate
5 m

Create Your First Node

Master the basics of node creation in ArkT diagrams

basicsbeginner

Practice with Tutorial

Apply what you've learned with an interactive, step-by-step tutorial.

View All Modules in Academy

On This Page

IntroductionWhy Templates MatterHow Templates WorkCreate Your First TemplateTemplate Power MovesQuick ReferenceYou're Ready!