Mermaid ADR approval and site implementation

docs/architecture/adr/0033-adopt-mermaid-diagram-standard.md

@@ -1,6 +1,6 @@
 ---
 adr: "0033"
-status: Proposed
+status: Accepted
 date: 2026-07-16
 tags: [clients, mobile, server, sdk]
 ---
@@ -36,10 +36,10 @@ audience-specific views -- requires substantial rework per audience in practice.
 
 ## Decision outcome
 
-Chosen option: **Mermaid with defined conventions**, published as the diagram standard on the
-contributing site. The standard is the living reference. Its rules evolve by PR without superseding
-this decision and this ADR is superseded only if the chosen option itself changes. A snapshot of the
-rules at adoption:
+Chosen option: **Mermaid with defined conventions**, published as the
+[diagram standard](../../contributing/diagrams.md) on the contributing site. The standard is the
+living reference and its rules evolve by PR without superseding this decision. This ADR is
+superseded only if the chosen option itself changes, but A snapshot of the rules at adoption:
 
 1. Diagrams are Mermaid source text, nothing else: as Mermaid code blocks, or, if in Confluence, via
    Macro Pack's Mermaid diagram in text-input mode.
@@ -80,12 +80,12 @@ rules at adoption:
 
 ### Plan
 
-[PR #834](https://github.com/bitwarden/contributing-docs/pull/834) publishes the standard at
-Contributing › Diagrams and converts the contributing site's existing diagrams (PlantUML/Kroki
-sources, static diagram assets, and source-less images) to comply, so the site itself becomes the
-reference implementation of the standard. Elsewhere, legacy diagrams convert when their docs are
-next touched: images and non-Mermaid sources in repos become Mermaid code blocks, and Confluence
-attachments and images become Macro Pack's Mermaid diagram in text-input mode.
+The standard is published at Contributing › Diagrams, and the bulk of the contributing site's
+existing diagrams (PlantUML/Kroki sources, static diagram assets, and source-less images) have been
+converted to comply, so the site becomes the reference implementation of the standard, with the
+exceptions noted below. Elsewhere, legacy diagrams convert when their docs are next touched: images
+and non-Mermaid sources in repos become Mermaid code blocks, and Confluence attachments and images
+become Macro Pack's Mermaid diagram in text-input mode.
 
 The remaining adoption work is delegated to its owners:
 

docs/architecture/clients/data-model.md

@@ -8,23 +8,24 @@ This document describes the internal data model used by the different client app
 several dedicated models to represent our data layer. With a slightly complicated data
 transformation pipeline.
 
-```kroki type=plantuml
-@startuml
-skinparam componentStyle rectangle
-component [""<Domain>""] as Domain
-component [""<Domain><Modifier>""Request] As Request
-component [""<Domain>""Response] as Response
-component [""<Domain>""View] as View
-component [""<Domain>""Export] as Export
-component [""<Domain>""Data] as Data
-
-[Response] -r-> [Data]
-[Data] <-r-> [Domain]
-[Domain] -r-> [Request]
-[Domain] <--> [View]
-[Domain] <--> [Export]
-[Export] -r-> [View]
-@enduml
+```mermaid
+---
+config:
+  layout: elk
+---
+flowchart LR
+    Response["&lt;Domain&gt;Response"]
+    Data["&lt;Domain&gt;Data"]
+    Domain["&lt;Domain&gt;"]
+    Request["&lt;Domain&gt;&lt;Modifier&gt;Request"]
+    Export["&lt;Domain&gt;Export"]
+    View["&lt;Domain&gt;View"]
+    Response --> Data
+    Data <--> Domain
+    Domain --> Request
+    Domain <--> Export
+    Domain <--> View
+    Export --> View
 ```
 
 ## Domain

docs/architecture/clients/index.md

@@ -33,44 +33,40 @@ For readability, ubiquitous app dependencies to `common` are hidden.
 
 :::
 
-```kroki type=plantuml
-@startuml
-skinparam BackgroundColor transparent
-skinparam componentStyle rectangle
-skinparam linetype ortho
-
-title Simplified Package Diagram
-
-component "Bitwarden License" {
-  component "Bit Web"
-}
+```mermaid
+---
+title: Simplified Package Diagram
+---
+flowchart TB
+    subgraph license ["Bitwarden License"]
+        BitWeb["Bit Web"]
+    end
 
-component apps {
-  component "Web Vault"
-  component "Desktop"
-  component "Browser Extension"
-  component "CLI"
-}
+    subgraph apps
+        WebVault["Web Vault"]
+        Desktop["Desktop"]
+        BrowserExtension["Browser Extension"]
+        CLI["CLI"]
+    end
 
-component libs {
-  component "Common"
-  component "Angular"
-  component "Node"
-}
+    subgraph libs
+        Common["Common"]
+        Angular["Angular"]
+        Node["Node"]
+    end
 
-[Bit Web] --> [Web Vault]
-[Bit Web] --[norank]> [Angular]
+    BitWeb --> WebVault
+    BitWeb --> Angular
 
-[Web Vault] --> [Angular]
+    WebVault --> Angular
 
-[Browser Extension] --> [Angular]
+    BrowserExtension --> Angular
 
-[CLI] --> [Node]
+    CLI --> Node
 
-[Angular] --> [Common]
+    Angular --> Common
 
-[Desktop] --> [Angular]
+    Desktop --> Angular
 
-[Node] --> [Common]
-@enduml
+    Node --> Common
 ```

docs/architecture/clients/overview.md

@@ -37,34 +37,28 @@ access the specific domain in the _State Service_.
 Below is an example how a _domain component_ and _domain service_ interacts with the _State
 Service_.
 
-```kroki type=plantuml
-@startuml
-skinparam BackgroundColor transparent
-skinparam componentStyle rectangle
-
-title State Service
-
-component "Example Domain" {
-  component "Components" as components
-
-  component "Domain Service" as domain
-}
-
-component "State Service" as state
-
-component "Storage Service" as storage
-component "Secure Storage Service" as secure
-component "Memory Storage Service" as memory
+```mermaid
+---
+title: State Service
+---
+flowchart TB
+    subgraph exampleDomain ["Example Domain"]
+        components["Components"]
+        domain["Domain Service"]
+    end
 
-components -d-> domain : subscribe \n observable
-domain -> state : retrieve state
+    state["State Service"]
 
-state --> storage
-state --> secure
+    storage["Storage Service"]
+    secure["Secure Storage Service"]
+    memory["Memory Storage Service"]
 
-state --> memory
+    components -->|"subscribe<br/>observable"| domain
+    domain -->|"retrieve state"| state
 
-@enduml
+    state --> storage
+    state --> secure
+    state --> memory
 ```
 
 ## Services