Architecture diagrams with official Databricks artwork. Free to use, and free to share. Every icon · Back to the library · Every slug · README
You do not download anything. The three icon packs are on GitHub Pages, and the
server sends access-control-allow-origin: *, so your page can read them straight
from the web. Paste the block below, change the slugs, and you have a diagram.
databricks-color:<slug>. All 71 slugs are in
CATALOG.md, and every one is drawn
further down this page.import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
const PACKS = 'https://oieduardorabelo.github.io/databricks-architecture-icons/mermaid';
mermaid.registerIconPacks([
{ name: 'databricks-color', loader: () => fetch(`${PACKS}/databricks-color.json`).then((r) => r.json()) },
{ name: 'databricks', loader: () => fetch(`${PACKS}/databricks.json`).then((r) => r.json()) },
{ name: 'databricks-outline', loader: () => fetch(`${PACKS}/databricks-outline.json`).then((r) => r.json()) },
]);
mermaid.initialize({ startOnLoad: true });
Two diagram types take an icon. Use architecture-beta for a quick
system sketch. Use flowchart when you need labels on the arrows, subgraphs or a
layout direction. The @{ icon: … } node shape needs Mermaid 11.3 or later.
architecture-beta
service gold(databricks-color:lakehouse-storage)[Managed Tables]
service wh(databricks-color:sql-warehouse)[SQL Warehouse]
gold:R --> L:wh
flowchart LR
gold@{ icon: "databricks-color:lakehouse-storage", form: "square", label: "Managed Tables", pos: "b" }
wh@{ icon: "databricks-color:sql-warehouse", form: "square", label: "SQL Warehouse", pos: "b" }
gold -->|"served hourly"| wh
Three packs, same 71 icons. Use databricks-color for the
official Databricks Lava artwork. Use databricks for a single-color version: it
inherits currentColor, so Mermaid paints each icon in the text color of the diagram.
That one suits a dark theme, or a house style that is not Lava. Use
databricks-outline to put each icon in a white rounded box with a lava hairline.
A boxed icon holds its shape on a busy or dark canvas, and it is the pattern the Databricks
community draws most often.
You need control of the Mermaid setup. The packs load through
registerIconPacks(), which is your JavaScript. It runs on your own page, and in a
docs site that lets you configure Mermaid, such as Docusaurus, VitePress or MkDocs. It does not
run inside a GitHub README or a GitHub issue, because GitHub renders that Mermaid itself and
never calls your code. For those, export the diagram to SVG and commit the image.
Pin the pack if the diagram must not change. The URL above always serves the
newest build. jsDelivr serves the same file from a commit, so it can hold one build for good:
https://cdn.jsdelivr.net/gh/oieduardorabelo/databricks-architecture-icons@<commit>/mermaid/databricks-color.json.
Put a full commit SHA in place of <commit>. A branch name such as
@main also works, but it moves with the branch and pins nothing. To work with no
network at all, download the archive
and serve mermaid/ yourself.
This page loads the packs from the folder beside it, not from the web, so it also opens from disk. Your project should use the hosted URL in the block above.
The icon pack did not load, so Mermaid draws a “?” for each
icon. Open this page from the published site,
or serve the project folder with npx serve ..
architecture-beta
group ingest(databricks-color:lakeflow)[Ingest]
group lake(databricks-color:unity-catalog)[Governed Lakehouse]
group serve(databricks-color:ai-bi)[Serve]
service crm(databricks-color:lakeflow-connect)[Lakeflow Connect] in ingest
service events(databricks-color:zerobus-ingest)[Zerobus Ingest] in ingest
service bronze(databricks-color:delta-lake)[Delta Lake] in lake
service etl(databricks-color:spark-declarative-pipelines)[Declarative Pipelines] in lake
service gold(databricks-color:lakehouse-storage)[Managed Tables] in lake
service wh(databricks-color:sql-warehouse)[SQL Warehouse] in serve
service dash(databricks-color:ai-bi-dashboards)[Dashboards] in serve
service genie(databricks-color:genie-agents)[Genie Agents] in serve
crm:R --> L:bronze
events:R --> B:bronze
bronze:R --> L:etl
etl:R --> L:gold
gold:R --> L:wh
wh:R --> L:dash
wh:B --> T:genie
The same diagram type, with databricks-outline in place of
databricks-color. Each icon arrives in a white rounded box with a lava hairline, so
it keeps its shape against a group fill or a dark page.
architecture-beta
group platform(databricks-outline:data-intelligence-platform)[Data Intelligence Platform]
service connect(databricks-outline:lakeflow-connect)[Lakeflow Connect] in platform
service pipelines(databricks-outline:spark-declarative-pipelines)[Declarative Pipelines] in platform
service uc(databricks-outline:unity-catalog)[Unity Catalog] in platform
service wh(databricks-outline:sql-warehouse)[SQL Warehouse] in platform
connect:R --> L:pipelines
pipelines:R --> L:wh
uc:T --> B:pipelines
architecture-beta
group app(databricks-color:databricks-apps)[Application]
group ai(databricks-color:agent-bricks)[Agent Runtime]
group data(databricks-color:unity-catalog)[Governed Data]
service ui(databricks-color:databricks-apps)[Databricks App] in app
service oltp(databricks-color:lakebase)[Lakebase] in app
service agent(databricks-color:agent-bricks)[Agent Bricks] in ai
service gw(databricks-color:unity-ai-gateway)[Unity AI Gateway] in ai
service serving(databricks-color:model-serving)[Model Serving] in ai
service search(databricks-color:ai-search)[AI Search] in ai
service docs(databricks-color:document-intelligence)[Document Intelligence] in data
service tables(databricks-color:lakehouse-storage)[Managed Tables] in data
service mlflow(databricks-color:mlflow)[Managed MLflow] in data
ui:R --> L:agent
ui:B --> T:oltp
agent:R --> L:gw
gw:R --> L:serving
agent:B --> T:search
docs:R --> L:search
tables:T --> B:search
serving:B --> T:mlflow
The architecture-beta type has no edge labels and little layout control. A flowchart
uses the same icon pack through the @{ icon: … } node shape. This shape needs Mermaid
11.3 or later. A flowchart gives you edge labels, subgraphs and every layout direction.
flowchart LR
src@{ icon: "databricks-color:lakeflow-connect", form: "square", label: "Lakeflow Connect", pos: "b" }
dlt@{ icon: "databricks-color:spark-declarative-pipelines", form: "square", label: "Declarative Pipelines", pos: "b" }
tbl@{ icon: "databricks-color:lakehouse-storage", form: "square", label: "Managed Tables", pos: "b" }
uc@{ icon: "databricks-color:unity-catalog", form: "square", label: "Unity Catalog", pos: "b" }
bi@{ icon: "databricks-color:ai-bi-dashboards", form: "square", label: "AI/BI Dashboards", pos: "b" }
src -->|"CDC, hourly"| dlt
dlt -->|"expectations"| tbl
tbl --> bi
uc -. "lineage + ABAC" .-> tbl
All icons from the databricks-color pack, drawn by Mermaid. Each one must
show the Databricks Lava artwork. A gray box or a “?” means that the pack did not load.
The build generates this section from the catalog, so it always covers every icon.
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
platform0@{ icon: "databricks-color:databricks", form: "square", label: "databricks", pos: "b" }
platform1@{ icon: "databricks-color:data-intelligence-platform", form: "square", label: "data-intelligence-platform", pos: "b" }
platform2@{ icon: "databricks-color:lakehouse", form: "square", label: "lakehouse", pos: "b" }
platform3@{ icon: "databricks-color:apache-spark", form: "square", label: "apache-spark", pos: "b" }
platform4@{ icon: "databricks-color:photon", form: "square", label: "photon", pos: "b" }
platform5@{ icon: "databricks-color:compute-clusters", form: "square", label: "compute-clusters", pos: "b" }
platform6@{ icon: "databricks-color:serverless-compute", form: "square", label: "serverless-compute", pos: "b" }
platform7@{ icon: "databricks-color:databricks-runtime", form: "square", label: "databricks-runtime", pos: "b" }
platform8@{ icon: "databricks-color:spark-real-time-mode", form: "square", label: "spark-real-time-mode", pos: "b" }
platform9@{ icon: "databricks-color:multicloud", form: "square", label: "multicloud", pos: "b" }
platform0 ~~~ platform1 ~~~ platform2 ~~~ platform3 ~~~ platform4 ~~~ platform5
platform6 ~~~ platform7 ~~~ platform8 ~~~ platform9
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
engineering0@{ icon: "databricks-color:lakeflow", form: "square", label: "lakeflow", pos: "b" }
engineering1@{ icon: "databricks-color:lakeflow-connect", form: "square", label: "lakeflow-connect", pos: "b" }
engineering2@{ icon: "databricks-color:zerobus-ingest", form: "square", label: "zerobus-ingest", pos: "b" }
engineering3@{ icon: "databricks-color:spark-declarative-pipelines", form: "square", label: "spark-declarative-pipelines", pos: "b" }
engineering4@{ icon: "databricks-color:lakeflow-jobs", form: "square", label: "lakeflow-jobs", pos: "b" }
engineering5@{ icon: "databricks-color:lakeflow-designer", form: "square", label: "lakeflow-designer", pos: "b" }
engineering6@{ icon: "databricks-color:auto-loader", form: "square", label: "auto-loader", pos: "b" }
engineering7@{ icon: "databricks-color:structured-streaming", form: "square", label: "structured-streaming", pos: "b" }
engineering8@{ icon: "databricks-color:lakebridge", form: "square", label: "lakebridge", pos: "b" }
engineering0 ~~~ engineering1 ~~~ engineering2 ~~~ engineering3 ~~~ engineering4 ~~~ engineering5
engineering6 ~~~ engineering7 ~~~ engineering8
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
storage0@{ icon: "databricks-color:delta-lake", form: "square", label: "delta-lake", pos: "b" }
storage1@{ icon: "databricks-color:apache-iceberg", form: "square", label: "apache-iceberg", pos: "b" }
storage2@{ icon: "databricks-color:lakehouse-storage", form: "square", label: "lakehouse-storage", pos: "b" }
storage3@{ icon: "databricks-color:liquid-clustering", form: "square", label: "liquid-clustering", pos: "b" }
storage4@{ icon: "databricks-color:predictive-optimization", form: "square", label: "predictive-optimization", pos: "b" }
storage5@{ icon: "databricks-color:lakebase", form: "square", label: "lakebase", pos: "b" }
storage0 ~~~ storage1 ~~~ storage2 ~~~ storage3 ~~~ storage4 ~~~ storage5
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
analytics0@{ icon: "databricks-color:data-warehousing", form: "square", label: "data-warehousing", pos: "b" }
analytics1@{ icon: "databricks-color:databricks-sql", form: "square", label: "databricks-sql", pos: "b" }
analytics2@{ icon: "databricks-color:sql-warehouse", form: "square", label: "sql-warehouse", pos: "b" }
analytics3@{ icon: "databricks-color:lakehouse-rt", form: "square", label: "lakehouse-rt", pos: "b" }
analytics4@{ icon: "databricks-color:ai-bi", form: "square", label: "ai-bi", pos: "b" }
analytics5@{ icon: "databricks-color:ai-bi-dashboards", form: "square", label: "ai-bi-dashboards", pos: "b" }
analytics6@{ icon: "databricks-color:lakehouse-federation", form: "square", label: "lakehouse-federation", pos: "b" }
analytics0 ~~~ analytics1 ~~~ analytics2 ~~~ analytics3 ~~~ analytics4 ~~~ analytics5
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
ai0@{ icon: "databricks-color:genie", form: "square", label: "genie", pos: "b" }
ai1@{ icon: "databricks-color:genie-one", form: "square", label: "genie-one", pos: "b" }
ai2@{ icon: "databricks-color:genie-agents", form: "square", label: "genie-agents", pos: "b" }
ai3@{ icon: "databricks-color:genie-code", form: "square", label: "genie-code", pos: "b" }
ai4@{ icon: "databricks-color:genie-deep-research", form: "square", label: "genie-deep-research", pos: "b" }
ai5@{ icon: "databricks-color:agent-bricks", form: "square", label: "agent-bricks", pos: "b" }
ai6@{ icon: "databricks-color:ai-search", form: "square", label: "ai-search", pos: "b" }
ai7@{ icon: "databricks-color:unity-ai-gateway", form: "square", label: "unity-ai-gateway", pos: "b" }
ai8@{ icon: "databricks-color:document-intelligence", form: "square", label: "document-intelligence", pos: "b" }
ai9@{ icon: "databricks-color:model-serving", form: "square", label: "model-serving", pos: "b" }
ai10@{ icon: "databricks-color:model-training", form: "square", label: "model-training", pos: "b" }
ai11@{ icon: "databricks-color:mlflow", form: "square", label: "mlflow", pos: "b" }
ai12@{ icon: "databricks-color:feature-store", form: "square", label: "feature-store", pos: "b" }
ai13@{ icon: "databricks-color:ai-functions", form: "square", label: "ai-functions", pos: "b" }
ai14@{ icon: "databricks-color:automl", form: "square", label: "automl", pos: "b" }
ai15@{ icon: "databricks-color:customerlake", form: "square", label: "customerlake", pos: "b" }
ai0 ~~~ ai1 ~~~ ai2 ~~~ ai3 ~~~ ai4 ~~~ ai5
ai6 ~~~ ai7 ~~~ ai8 ~~~ ai9 ~~~ ai10 ~~~ ai11
ai12 ~~~ ai13 ~~~ ai14 ~~~ ai15
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
governance0@{ icon: "databricks-color:unity-catalog", form: "square", label: "unity-catalog", pos: "b" }
governance1@{ icon: "databricks-color:unity-catalog-semantics", form: "square", label: "unity-catalog-semantics", pos: "b" }
governance2@{ icon: "databricks-color:data-lineage", form: "square", label: "data-lineage", pos: "b" }
governance3@{ icon: "databricks-color:abac", form: "square", label: "abac", pos: "b" }
governance4@{ icon: "databricks-color:data-quality-monitoring", form: "square", label: "data-quality-monitoring", pos: "b" }
governance5@{ icon: "databricks-color:lakewatch", form: "square", label: "lakewatch", pos: "b" }
governance6@{ icon: "databricks-color:system-tables", form: "square", label: "system-tables", pos: "b" }
governance7@{ icon: "databricks-color:enterprise-security", form: "square", label: "enterprise-security", pos: "b" }
governance0 ~~~ governance1 ~~~ governance2 ~~~ governance3 ~~~ governance4 ~~~ governance5
governance6 ~~~ governance7
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
sharing0@{ icon: "databricks-color:delta-sharing", form: "square", label: "delta-sharing", pos: "b" }
sharing1@{ icon: "databricks-color:opensharing", form: "square", label: "opensharing", pos: "b" }
sharing2@{ icon: "databricks-color:marketplace", form: "square", label: "marketplace", pos: "b" }
sharing3@{ icon: "databricks-color:clean-rooms", form: "square", label: "clean-rooms", pos: "b" }
sharing4@{ icon: "databricks-color:partner-connect", form: "square", label: "partner-connect", pos: "b" }
sharing0 ~~~ sharing1 ~~~ sharing2 ~~~ sharing3 ~~~ sharing4
---
config:
flowchart:
htmlLabels: true
---
flowchart LR
devtools0@{ icon: "databricks-color:databricks-apps", form: "square", label: "databricks-apps", pos: "b" }
devtools1@{ icon: "databricks-color:notebooks", form: "square", label: "notebooks", pos: "b" }
devtools2@{ icon: "databricks-color:workspace", form: "square", label: "workspace", pos: "b" }
devtools3@{ icon: "databricks-color:git-folders", form: "square", label: "git-folders", pos: "b" }
devtools4@{ icon: "databricks-color:asset-bundles", form: "square", label: "asset-bundles", pos: "b" }
devtools5@{ icon: "databricks-color:databricks-cli", form: "square", label: "databricks-cli", pos: "b" }
devtools6@{ icon: "databricks-color:databricks-connect", form: "square", label: "databricks-connect", pos: "b" }
devtools7@{ icon: "databricks-color:ide-integrations", form: "square", label: "ide-integrations", pos: "b" }
devtools8@{ icon: "databricks-color:rest-api", form: "square", label: "rest-api", pos: "b" }
devtools9@{ icon: "databricks-color:terraform-provider", form: "square", label: "terraform-provider", pos: "b" }
devtools0 ~~~ devtools1 ~~~ devtools2 ~~~ devtools3 ~~~ devtools4 ~~~ devtools5
devtools6 ~~~ devtools7 ~~~ devtools8 ~~~ devtools9