User Guide — Business Metrics Studio

FREE KPI Tool – Business Metrics Studio

A visual workspace for building KPI trees, analyzing metrics, mapping dependencies, and performing root cause analysis — all in one tool.

👉 Click here to open the free KPI Tree Tool

A visual workspace for building KPI trees, analyzing metrics, mapping dependencies, and performing root cause analysis — all in one tool.

Current version · Runs entirely in the browser · No login required

👋 Introduction

KPI Tree – Business Metrics Studio is a web application that runs directly in your browser, with no installation or account registration required. The tool helps you:

🎯

Build KPI trees

Structure Goals → Drivers → Metrics along a strategic hierarchy.

📐

Analyze North Star metrics

Mathematical decomposition: Revenue = Traffic × Conversion Rate × AOV.

🌳

MECE issue trees

Consulting-style root cause analysis: Why is profit declining?

🔗

Dependency maps

Show upstream and downstream impacts between KPIs.

🐟

Fishbone analysis

Ishikawa diagrams combined with MECE thinking to identify root causes.

🧮

Scenario calculation

Simulate the impact of changing metric values.

💡

Autosave: All changes are automatically saved to browser storage (localStorage). You can close the tab and reopen it without losing data. To keep a project long-term, export a JSON file.

🗂 Interface overview

The interface is divided into 4 main areas:

Toolbar — top area

Contains the logo, ＋ New button, 5 working modes, quick action buttons (Undo, Layout, Zoom), template and export/import menus, and the light/dark mode toggle.

Sidebar — left side

The Add Node panel (drag and drop or click to add), Quick Templates (8 ready-made templates), and the list of all existing nodes. Press ◧ to hide/show the sidebar.

Infinite canvas — center area

The main workspace. Drag to pan, scroll to zoom in/out. Double-click to quickly add a node. A minimap appears in the bottom-right corner.

Properties Panel — right side

Appears when you select a node or connection. Edit the name, formula, value, target, owner, line color, and more, then click 💾 Save.

🚀 Quick Start (5 minutes)

Choose the right template

Click the button 📋 on the toolbar or click a template card in the Sidebar. For example, choose N. Star to start with the North Star Metric model.

Edit a KPI node

Click the ✏ icon on a node, or double-click to open the properties panel. Fill in the name, formula, current value, target, unit, and owner.

Add a new node

Drag a node type from the Sidebar into the Canvas, double-click an empty area of the Canvas, or press N. Choose a type: Goal, Driver, KPI, Metric, Issue, or Cause.

Connect nodes

Click the button ⇢ on the source node (or click the small circle next to the node), then click the target node. Press ESC to cancel.

Arrange & Export

Click ⊞ to automatically arrange the tree. Click ⊡ to fit the diagram to the screen. Export PNG or SVG through the ⬇ menu.

🎯 5 Working Modes

Switch between modes by clicking the buttons on the mode bar (the center part of the toolbar). Each mode changes the default node types shown in the Sidebar.

🎯

KPI Tree

Strategic hierarchy: Goal → Driver → KPI

📐

North Star

Mathematical decomposition of the core metric

🌳

Issue Tree

Consulting-style MECE issue tree

🔗

Dependency

Network diagram of KPI dependencies

🐟

Root Cause

Root cause analysis (Fishbone)

ℹ️

Changing modes does not delete existing data. It only changes the default node types displayed in the Sidebar.

📦 KPI Nodes (Cards)

Node types

🎯 Goal — Objective ⚙️ Driver — Business driver 📊 KPI — Key performance indicator 📐 Metric — Measurement ❓ Issue — Problem ⚡ Cause — Root cause

Working with nodes

➕ Add node

Drag from the Sidebar, double-click the Canvas, press N, or click the + button on an existing node to add a child node.

✏ Edit

Click ✏ on a node to open the properties panel on the right. Click 💾 Save to confirm.

🖱 Drag to move

Click and drag the node to a new position. Connections update automatically.

⊟ Collapse

Click the button ⊟ to hide/show child nodes in a branch. This keeps the interface tidy when the tree becomes large.

⧉ Duplicate

Right-click → Duplicate. A new node is created next to it with all data preserved.

🗑 Delete

Select a node and press Delete, right-click → Delete, or use the 🗑 button in the properties panel.

Properties of a KPI node

Identity

Name — Metric name
Type — Goal/Driver/KPI…
Formula — Example: Revenue = Views × Conversion Rate × AOV
Description — Detailed definition

Measurement

Current value — Actual number
Unit — %, $, #, VND…
Baseline — Initial baseline value
Target — Target to achieve

Classification

Cadence — Day/Week/Month/Quarter/Year
Direction — ↑ Higher is better / ↓ Lower is better
Indicator — ▲ Leading (predictive) / ▼ Lagging (outcome)
Tags — Classification labels

Ownership

Owner — Responsible person/team
Data source — System providing the data
Notes — Additional information

💡

Automatic status: When both Value and Target are filled in, the node automatically displays 🟢 (achieved) or 🔴 (not achieved), based on the metric direction.

🔗 Connections (Lines)

Create a connection

Method 1 — Connection button

Click the ⇢ button on the source node, then click the target node. The connection appears immediately.

Method 2 — Small circles around the node

Hover over a node to see 4 small circles (top/bottom/left/right). Click a circle to start drawing a line.

Method 3 — Edge Mode

Click the button ⇢ on the toolbar (or press E) to enable connection mode. Click the two nodes you want to connect. Press ESC to exit.

Edit a connection

Click a connection line to open the Connection Panel on the right, where you can edit:

🔄 Relationship type

↑ Positive — green, same-direction impact
↓ Negative — red, dashed line, opposite-direction impact
→ Neutral — gray

✏ Line style

Solid — solid line
Dashed — dashed line
Dotted — dotted line

🎨 Custom color

Choose one of 8 preset colors or use the default color based on relationship type. Click 💾 to save.

🏷 Label

Add a label displayed on the connection line, for example: “drives”, “blocks”, “+20%”.

Delete a connection

Click the line → press Delete
Double-click the line → delete immediately
Right-click → Remove Connection
Select the line → click the 🗑 button in the Connection panel

📋 Templates (Templates)

There are 9 templates available from the toolbar (📋) or Sidebar:

⭐ North Star

Core metric analysis model. Suitable for products/startups.

☁️ SaaS Metrics

ARR, New Logos, Expansion, Churn. Designed for SaaS companies.

🛒 Ecommerce

GMV = Orders × AOV. Conversion rate, cart metrics.

⚖️ Balanced Scorecard

4 perspectives: Financial, Customer, Process, Learning.

📉 Profit Decline

MECE issue tree for analyzing profit decline.

🔍 Root Cause

Fishbone diagram for analyzing causes of low retention.

🎯 OKR

Objective + 3 Key Results. Designed for quarterly goal management.

🏪 Marketplace

GMV = Buyers × Sellers × Transactions × AOV.

⚠️

Note: Loading a new template will replace the current data. Export JSON first if you need to keep the old data (use ＋ New → Export & Clear).

🖱 Canvas & Navigation

🔍 Zoom in/out

Scroll on the Canvas. Or use the − / + / ⊡ buttons in the zoom bar at the bottom of the screen.

🖐 Pan the Canvas

Hold the left mouse button on an empty area and drag. Or hold the middle mouse button.

⊡ Fit to screen

Click the button ⊡ or press F to automatically adjust zoom so the full diagram is visible.

⊞ Auto layout

Click the button ⊞ or press L to rearrange the diagram into a top-down tree structure.

🗺 Minimap

The minimap in the bottom-right corner shows an overview of the entire diagram, helping you navigate large trees.

🔎 Search

Press Ctrl+F or type into the search box in the Sidebar. Click a result to zoom to that node.

⚙️ Properties Panel

Node Properties Panel (KPI Node)

Open it by clicking ✏ on a node or pressing Enter while a node is selected. It includes 5 groups:

Identity — Name, type, formula, description
Measurement — Value, unit, baseline, target, cadence, direction
Classification — Leading/Lagging indicator, tags
Ownership — Owner, data source, notes
Connections — See which nodes are connected upstream/downstream

Connection Properties Panel (Connections)

Open it by clicking a connection line. It includes:

Relationship type — Positive / Negative / Neutral
Line style — Solid / Dashed / Dotted
Color — 8 optional colors
Label — Text displayed on the line

💡

Remember to click 💾 Save after editing in the node properties panel. For connection lines, color and line style changes are applied when you click 💾 Save.

🛠 Smart Tools

🩺 KPI quality diagnostics

Click the button 🩺 on the toolbar. The tool automatically checks and alerts you about:

❌ Critical errors

Duplicate names across nodes — this can cause analytical confusion.

⚠️ Warnings

Orphan nodes (no connections), KPIs missing units, and KPIs missing targets.

ℹ️ Information

Nodes missing definitions, missing owners, or having leading/lagging imbalance.

📊 Quality score

Score from 0–100. Above 75 = good, 50–75 = needs improvement, below 50 = needs review.

🧮 Scenario calculation

Click the button 🧮. Drag sliders to simulate KPI value changes and see the combined impact. The sensitivity analysis table shows ±10% and ±20% impact for each metric.

▦ Spreadsheet view

Click the button ▦ to open the spreadsheet interface. It lets you edit many KPIs directly at once, similar to Excel — useful for bulk updates.

📤 Export and Import Data

All export/import functions are in the ⬇ menu on the toolbar:

📄 JSON

Export: Save the entire project (nodes + connections + settings) as a .json file.
Import: Reload a saved project.

📊 CSV

Export: A tabular KPI list that can be opened in Excel.
Import: Load KPIs from a CSV file with standard headers.

📝 Markdown

Export structured KPI documentation that can be pasted into Notion, Confluence, or GitHub.

🎨 SVG

Export a high-quality vector diagram — it can be scaled without losing sharpness.

🖼 PNG

Export a high-resolution image (2×) for reports or PowerPoint slides.

🗂 New Project

Click ＋ New to create a blank project or load a new template. There is an Export option before clearing existing data.

CSV import format

The CSV file needs a header row with the following columns:

name,type,formula,owner,unit,value,baseline,target,cadence,direction,indicator,tags
“Revenue”,“metric”,“Traffic × Conv × AOV”,“CEO”,“VND”,“1.2M”,“1M”,“1.5M”,“Monthly”,“up”,“lagging”,“financial”

⌨ Keyboard Shortcuts

Add a new nodeN

Delete selected itemDelete

UndoCtrl+Z

RedoCtrl+Y

Line drawing modeE

Fit to screenF

Auto layoutL

Zoom in / out+ / −

Search nodeCtrl+F

Edit node propertiesEnter

Light/dark modeD

Cancel / DeselectESC

Shortcut panel?

Collapse/Expand nodeRight-click → Collapse

📊 Connect with Power BI

Business Metrics Studio does not have a direct Power BI integration, but there are 3 practical integration workflows depending on your use case:

ℹ️

Integration philosophy: Business Metrics Studio is a tool for strategic design and KPI documentation. Power BI is a tool for visualizing actual data. The two tools complement each other — BMS helps you define KPIs, while Power BI helps you monitor KPIs.

Workflow 1 — Export CSV → Power BI (Simplest)

BMS
Design KPI

→

Export
CSV

→

Power BI
Import CSV

→

Create
Dashboard

Export CSV from BMS

Press ⬇ → Export CSV. The file contains the full KPI list with target, owner, unit, formula, and more.

Import into Power BI

In Power BI Desktop: Get Data → Text/CSV → select the exported file. The KPI table will appear in the Data Model.

Combine with actual data

Create a relationship between the KPI table (from BMS) and your actual data table (from a database, Excel, etc.) using the name column or metric ID.

Use Target as a threshold

The target column from BMS can be used as a threshold in DAX measures to compare actual performance against the target.

Workflow 2 — Export JSON → Power BI via Python/R Script

BMS
Export JSON

→

Python
Script

→

Power BI
Transform

→

KPI Tree
Visual

Use Power Query with a Python script to read the JSON file from BMS and convert it into a hierarchy table:

# Power Query → Run Python Script
import json, pandas as pd
# Read the JSON file exported from Business Metrics Studio
with open(‘metrics.json’, ‘r’, encoding=‘utf-8’) as f:
    data = json.load(f)
# Convert nodes into a DataFrame
nodes_df = pd.DataFrame(data[‘nodes’])
nodes_df = nodes_df[[‘id’,‘name’,‘type’,‘formula’,
                       ‘value’,‘target’,‘unit’,‘owner’,
                       ‘cadence’,‘indicator’]]
# Convert edges into a parent-child hierarchy table
edges_df = pd.DataFrame(data[‘edges’])[
    [‘from’,‘to’,‘rel’]
].rename(columns={‘from’:‘parent_id’,‘to’:‘child_id’})
# Output for Power BI
dataset = nodes_df  # Power BI reads the ‘dataset’ variable

Then in Power BI, you can use the Decomposition Tree or Hierarchy Chart visual to display the KPI tree with actual data.

Workflow 3 — Integration via Power BI Custom Visual or Embed

Advanced option

If your team wants to embed the BMS diagram directly into a Power BI report:

Power BI → Insert → Image: Export PNG from BMS and insert it into the report page as a strategic background image.
Power BI → Insert → Power Apps: Embed the BMS HTML file through a Power Apps visual (requires a Power Apps license).
Iframe trong Power BI Embedded: When BMS is deployed to a web server (Netlify/GitHub Pages), use the Web Content visual to embed it via URL.
Bookmark + Drill-through: Create a “KPI Map” page in Power BI containing the SVG image from BMS, and connect drill-through to detailed metric pages.

Sample DAX Measure — Use Target from BMS

— After importing the KPI table from BMS into Power BI:
— Measure comparing actual performance with target
KPI Status =
VAR ActualValue = [Total Revenue]
VAR TargetValue =
    LOOKUPVALUE(
        KPI_From_BMS[target],
        KPI_From_BMS[name], “Revenue”
    )
RETURN
    IF(ActualValue >= TargetValue, “✅ Achieved”, “❌ Not achieved”)
— % target achievement
Target Achievement % =
DIVIDE(
    [Total Revenue],
    LOOKUPVALUE(KPI_From_BMS[target], KPI_From_BMS[name], “Revenue”),
    0
)

💡

Recommended workflow: Use BMS for strategy meetings and to align KPI definitions with stakeholders → Export CSV → Import into Power BI as a “KPI definition table” → Connect with actual data → Use targets from BMS as evaluation thresholds in the dashboard.

❓ FAQ

Will data be lost when I close the browser?

No. Data is automatically saved to the browser’s localStorage after every change. However, if you clear your browser cache or use Incognito mode, the data may be lost. Export JSON regularly for long-term storage.

Does the tool support teamwork?

Real-time collaboration is not currently available. To share your work, export a JSON file and send it to colleagues; they can import it into their own version.

Can it be used on mobile?

Yes, the interface is responsive on mobile. However, the best experience is on a computer (desktop/laptop), because the canvas needs a large working area.

What is the maximum number of nodes?

There is no hard limit. In practice, performance remains good with 50–100 nodes. For very large diagrams (200+ nodes), use the Collapse branch feature (⊟) to keep the canvas clean.

Do formulas calculate automatically?

The “Formula” field is currently descriptive text (it does not calculate automatically). Use the Scenario Calculator (🧮) to simulate value changes by scenario.

How do I print or export to PDF?

Export PNG or SVG, then insert it into Word/PowerPoint and print. Or use Ctrl+P in the browser → Save as PDF (choose “Save as PDF” in the print dialog).

KPI Tree – Business Metrics Studio · English Documentation · Runs entirely in the browser