diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
index bcb137a12..4c3f4f73b 100644
--- a/packages/frontend/src/App.tsx
+++ b/packages/frontend/src/App.tsx
@@ -8,11 +8,10 @@ import * as uuid from "uuid";
 import { MultiProvider } from "@solid-primitives/context";
 import { Navigate, type RouteDefinition, type RouteSectionProps, Router } from "@solidjs/router";
 import { FirebaseProvider } from "solid-firebase";
-import { Show, createResource, lazy, useContext } from "solid-js";
+import { Show, createResource, lazy } from "solid-js";
 
-import type { JsonValue } from "catcolab-api";
-import { RepoContext, RpcContext, createRpcClient } from "./api";
-import { newModelDocument } from "./model/document";
+import { RepoContext, RpcContext, createRpcClient, useApi } from "./api";
+import { createModel } from "./model/document";
 import { HelpContainer, lazyMdx } from "./page/help_page";
 import { TheoryLibraryContext, stdTheories } from "./stdlib";
 
@@ -46,21 +45,9 @@ const Root = (props: RouteSectionProps<unknown>) => {
 };
 
 function CreateModel() {
-    const rpc = useContext(RpcContext);
-    invariant(rpc, "Missing context to create model");
+    const api = useApi();
 
-    const init = newModelDocument();
-
-    const [ref] = createResource<string>(async () => {
-        const result = await rpc.new_ref.mutate({
-            content: init as JsonValue,
-            permissions: {
-                anyone: "Read",
-            },
-        });
-        invariant(result.tag === "Ok", "Failed to create model");
-        return result.content;
-    });
+    const [ref] = createResource<string>(() => createModel(api));
 
     return <Show when={ref()}>{(ref) => <Navigate href={`/model/${ref()}`} />}</Show>;
 }
diff --git a/packages/frontend/src/analysis/analysis_editor.tsx b/packages/frontend/src/analysis/analysis_editor.tsx
index 1ef5b6319..c4b8b25bb 100644
--- a/packages/frontend/src/analysis/analysis_editor.tsx
+++ b/packages/frontend/src/analysis/analysis_editor.tsx
@@ -1,12 +1,20 @@
 import Resizable, { type ContextValue } from "@corvu/resizable";
 import { useParams } from "@solidjs/router";
-import { Show, createEffect, createResource, createSignal, useContext } from "solid-js";
+import {
+    Match,
+    Show,
+    Switch,
+    createEffect,
+    createResource,
+    createSignal,
+    useContext,
+} from "solid-js";
 import { Dynamic } from "solid-js/web";
 import invariant from "tiny-invariant";
 
-import { RepoContext, RpcContext, getLiveDoc } from "../api";
+import { useApi } from "../api";
 import { IconButton, ResizableHandle } from "../components";
-import { LiveModelContext, type ModelDocument, enlivenModelDocument } from "../model";
+import { DiagramPane } from "../diagram/diagram_editor";
 import { ModelPane } from "../model/model_editor";
 import {
     type CellConstructor,
@@ -16,9 +24,15 @@ import {
 } from "../notebook";
 import { BrandedToolbar, HelpButton } from "../page";
 import { TheoryLibraryContext } from "../stdlib";
-import type { ModelAnalysisMeta } from "../theory";
-import type { AnalysisDocument, LiveAnalysisDocument } from "./document";
-import type { ModelAnalysis } from "./types";
+import type { AnalysisMeta } from "../theory";
+import { LiveAnalysisContext } from "./context";
+import {
+    type LiveAnalysisDocument,
+    type LiveDiagramAnalysisDocument,
+    type LiveModelAnalysisDocument,
+    getLiveAnalysis,
+} from "./document";
+import type { Analysis } from "./types";
 
 import PanelRight from "lucide-solid/icons/panel-right";
 import PanelRightClose from "lucide-solid/icons/panel-right-close";
@@ -28,87 +42,13 @@ export default function AnalysisPage() {
     const refId = params.ref;
     invariant(refId, "Must provide document ref as parameter to analysis page");
 
-    const rpc = useContext(RpcContext);
-    const repo = useContext(RepoContext);
+    const api = useApi();
     const theories = useContext(TheoryLibraryContext);
-    invariant(rpc && repo && theories, "Missing context for analysis page");
-
-    const [liveAnalysis] = createResource<LiveAnalysisDocument>(async () => {
-        const liveDoc = await getLiveDoc<AnalysisDocument>(rpc, repo, refId);
-        const { doc } = liveDoc;
-        invariant(doc.type === "analysis", () => `Expected analysis, got type: ${doc.type}`);
+    invariant(theories, "Must provide theory library as context to analysis page");
 
-        const liveModelDoc = await getLiveDoc<ModelDocument>(rpc, repo, doc.modelRef.refId);
-        const liveModel = enlivenModelDocument(doc.modelRef.refId, liveModelDoc, theories);
-
-        return { refId, liveDoc, liveModel };
-    });
+    const [liveAnalysis] = createResource(() => getLiveAnalysis(refId, api, theories));
 
-    return (
-        <Show when={liveAnalysis()}>
-            {(liveAnalysis) => <AnalysisDocumentEditor liveAnalysis={liveAnalysis()} />}
-        </Show>
-    );
-}
-
-/** Notebook editor for analyses of models of double theories.
- */
-export function AnalysisPane(props: {
-    liveAnalysis: LiveAnalysisDocument;
-}) {
-    const liveDoc = () => props.liveAnalysis.liveDoc;
-    return (
-        <LiveModelContext.Provider value={props.liveAnalysis.liveModel}>
-            <NotebookEditor
-                handle={liveDoc().docHandle}
-                path={["notebook"]}
-                notebook={liveDoc().doc.notebook}
-                changeNotebook={(f) => liveDoc().changeDoc((doc) => f(doc.notebook))}
-                formalCellEditor={ModelAnalysisCellEditor}
-                cellConstructors={modelAnalysisCellConstructors(
-                    props.liveAnalysis.liveModel.theory()?.modelAnalyses ?? [],
-                )}
-                noShortcuts={true}
-            />
-        </LiveModelContext.Provider>
-    );
-}
-
-function ModelAnalysisCellEditor(props: FormalCellEditorProps<ModelAnalysis>) {
-    const liveModel = useContext(LiveModelContext);
-    invariant(liveModel, "Live model should be provided as context for analysis");
-
-    return (
-        <Show when={liveModel.theory()?.modelAnalysis(props.content.id)}>
-            {(analysis) => (
-                <Dynamic
-                    component={analysis().component}
-                    liveModel={liveModel}
-                    content={props.content.content}
-                    changeContent={(f: (c: unknown) => void) =>
-                        props.changeContent((content) => f(content.content))
-                    }
-                />
-            )}
-        </Show>
-    );
-}
-
-function modelAnalysisCellConstructors(
-    analyses: ModelAnalysisMeta[],
-): CellConstructor<ModelAnalysis>[] {
-    return analyses.map((analysis) => {
-        const { id, name, description, initialContent } = analysis;
-        return {
-            name,
-            description,
-            construct: () =>
-                newFormalCell({
-                    id,
-                    content: initialContent(),
-                }),
-        };
-    });
+    return <AnalysisDocumentEditor liveAnalysis={liveAnalysis()} />;
 }
 
 /** Editor for a model of a double theory.
@@ -117,11 +57,8 @@ The editor includes a notebook for the model itself plus another pane for
 performing analysis of the model.
  */
 export function AnalysisDocumentEditor(props: {
-    liveAnalysis: LiveAnalysisDocument;
+    liveAnalysis?: LiveAnalysisDocument;
 }) {
-    const rpc = useContext(RpcContext);
-    invariant(rpc, "Must provide RPC context");
-
     const [resizableContext, setResizableContext] = createSignal<ContextValue>();
     const [isSidePanelOpen, setSidePanelOpen] = createSignal(true);
 
@@ -170,7 +107,7 @@ export function AnalysisDocumentEditor(props: {
                                     </Show>
                                 </IconButton>
                             </BrandedToolbar>
-                            <ModelPane liveModel={props.liveAnalysis.liveModel} />
+                            <AnalysisOfPane liveAnalysis={props.liveAnalysis} />
                         </Resizable.Panel>
                         <ResizableHandle hidden={!isSidePanelOpen()} />
                         <Resizable.Panel
@@ -184,7 +121,11 @@ export function AnalysisDocumentEditor(props: {
                         >
                             <div class="notebook-container">
                                 <h2>Analysis</h2>
-                                <AnalysisPane liveAnalysis={props.liveAnalysis} />
+                                <Show when={props.liveAnalysis}>
+                                    {(liveAnalysis) => (
+                                        <AnalysisNotebookEditor liveAnalysis={liveAnalysis()} />
+                                    )}
+                                </Show>
                             </div>
                         </Resizable.Panel>
                     </>
@@ -193,3 +134,107 @@ export function AnalysisDocumentEditor(props: {
         </Resizable>
     );
 }
+
+const AnalysisOfPane = (props: {
+    liveAnalysis?: LiveAnalysisDocument;
+}) => (
+    <Switch>
+        <Match when={props.liveAnalysis?.analysisType === "model" && props.liveAnalysis.liveModel}>
+            {(liveModel) => <ModelPane liveModel={liveModel()} />}
+        </Match>
+        <Match
+            when={props.liveAnalysis?.analysisType === "diagram" && props.liveAnalysis.liveDiagram}
+        >
+            {(liveDiagram) => <DiagramPane liveDiagram={liveDiagram()} />}
+        </Match>
+    </Switch>
+);
+
+/** Notebook editor for analyses of models of double theories.
+ */
+export function AnalysisNotebookEditor(props: {
+    liveAnalysis: LiveAnalysisDocument;
+}) {
+    const liveDoc = () => props.liveAnalysis.liveDoc;
+
+    const cellConstructors = () => {
+        let meta = undefined;
+        if (props.liveAnalysis.analysisType === "model") {
+            meta = props.liveAnalysis.liveModel.theory()?.modelAnalyses;
+        } else if (props.liveAnalysis.analysisType === "diagram") {
+            meta = props.liveAnalysis.liveDiagram.liveModel.theory()?.diagramAnalyses;
+        }
+        return (meta ?? []).map(analysisCellConstructor);
+    };
+
+    return (
+        <LiveAnalysisContext.Provider value={props.liveAnalysis}>
+            <NotebookEditor
+                handle={liveDoc().docHandle}
+                path={["notebook"]}
+                notebook={liveDoc().doc.notebook}
+                changeNotebook={(f) => liveDoc().changeDoc((doc) => f(doc.notebook))}
+                formalCellEditor={AnalysisCellEditor}
+                cellConstructors={cellConstructors()}
+                noShortcuts={true}
+            />
+        </LiveAnalysisContext.Provider>
+    );
+}
+
+function AnalysisCellEditor(props: FormalCellEditorProps<Analysis<unknown>>) {
+    const liveAnalysis = useContext(LiveAnalysisContext);
+    invariant(liveAnalysis, "Live analysis should be provided as context for cell editor");
+
+    return (
+        <Switch>
+            <Match
+                when={
+                    liveAnalysis.analysisType === "model" &&
+                    liveAnalysis.liveModel.theory()?.modelAnalysis(props.content.id)
+                }
+            >
+                {(analysis) => (
+                    <Dynamic
+                        component={analysis().component}
+                        liveModel={(liveAnalysis as LiveModelAnalysisDocument).liveModel}
+                        content={props.content.content}
+                        changeContent={(f: (c: unknown) => void) =>
+                            props.changeContent((content) => f(content.content))
+                        }
+                    />
+                )}
+            </Match>
+            <Match
+                when={
+                    liveAnalysis.analysisType === "diagram" &&
+                    liveAnalysis.liveDiagram.liveModel.theory()?.diagramAnalysis(props.content.id)
+                }
+            >
+                {(analysis) => (
+                    <Dynamic
+                        component={analysis().component}
+                        liveDiagram={(liveAnalysis as LiveDiagramAnalysisDocument).liveDiagram}
+                        content={props.content.content}
+                        changeContent={(f: (c: unknown) => void) =>
+                            props.changeContent((content) => f(content.content))
+                        }
+                    />
+                )}
+            </Match>
+        </Switch>
+    );
+}
+
+function analysisCellConstructor<T>(meta: AnalysisMeta<T>): CellConstructor<Analysis<T>> {
+    const { id, name, description, initialContent } = meta;
+    return {
+        name,
+        description,
+        construct: () =>
+            newFormalCell({
+                id,
+                content: initialContent(),
+            }),
+    };
+}
diff --git a/packages/frontend/src/analysis/context.ts b/packages/frontend/src/analysis/context.ts
new file mode 100644
index 000000000..3d41c7f3a
--- /dev/null
+++ b/packages/frontend/src/analysis/context.ts
@@ -0,0 +1,6 @@
+import { createContext } from "solid-js";
+
+import type { LiveAnalysisDocument } from "./document";
+
+/** Context for a live analysis. */
+export const LiveAnalysisContext = createContext<LiveAnalysisDocument>();
diff --git a/packages/frontend/src/analysis/document.ts b/packages/frontend/src/analysis/document.ts
index 93308e965..777ef2748 100644
--- a/packages/frontend/src/analysis/document.ts
+++ b/packages/frontend/src/analysis/document.ts
@@ -1,43 +1,132 @@
-import type { ExternRef, LiveDoc } from "../api";
-import type { LiveModelDocument } from "../model";
+import invariant from "tiny-invariant";
+
+import type { JsonValue } from "catcolab-api";
+import { type Api, type ExternRef, type LiveDoc, getLiveDoc } from "../api";
+import { type LiveDiagramDocument, getLiveDiagram } from "../diagram";
+import { type LiveModelDocument, getLiveModel } from "../model";
 import { type Notebook, newNotebook } from "../notebook";
-import type { ModelAnalysis } from "./types";
+import type { TheoryLibrary } from "../stdlib";
+import type { Analysis } from "./types";
 
-/** A document defining an analysis of a model. */
-export type AnalysisDocument = {
+type AnalysisType = "model" | "diagram";
+
+/** Common base type for all analysis documents. */
+export type BaseAnalysisDocument<T extends AnalysisType> = {
     type: "analysis";
 
     /** User-defined name of analysis. */
     name: string;
 
-    /** Reference to the model that the analysis is of. */
-    modelRef: ExternRef & { taxon: "model" };
+    /** Reference to the document that the analysis is of. */
+    analysisOf: ExternRef<T>;
 
-    /** Content of the analysis. */
-    notebook: Notebook<ModelAnalysis>;
+    /** Content of the analysis.
+
+    Because each analysis comes with its own content type and Solid component,
+    we do not bother to enumerate all possible analyses in a tagged union.
+    This means that analysis content type is `unknown`.
+     */
+    notebook: Notebook<Analysis<unknown>>;
 };
 
-/** Create an empty analysis of a model. */
-export const newAnalysisDocument = (modelRefId: string): AnalysisDocument => ({
+/** A document defining an analysis of a model. */
+export type ModelAnalysisDocument = BaseAnalysisDocument<"model">;
+
+/** A document defining an analysis of a diagram. */
+export type DiagramAnalysisDocument = BaseAnalysisDocument<"diagram">;
+
+/** A document defining an analysis. */
+export type AnalysisDocument = ModelAnalysisDocument | DiagramAnalysisDocument;
+
+/** Create an empty analysis. */
+export const newAnalysisDocument = (
+    taxon: AnalysisType,
+    refId: string,
+): BaseAnalysisDocument<typeof taxon> => ({
     name: "",
     type: "analysis",
-    modelRef: {
+    analysisOf: {
         tag: "extern-ref",
-        refId: modelRefId,
-        taxon: "model",
+        refId,
+        taxon,
     },
     notebook: newNotebook(),
 });
 
-/** An analysis document "live" for editing.
- */
-export type LiveAnalysisDocument = {
+/** A model analysis document "live" for editing. */
+export type LiveModelAnalysisDocument = {
+    analysisType: "model";
+
     /** The ref for which this is a live document. */
     refId: string;
 
-    /** Live document with the analysis data. */
-    liveDoc: LiveDoc<AnalysisDocument>;
+    /** Live document defining the analysis. */
+    liveDoc: LiveDoc<ModelAnalysisDocument>;
 
     /** Live model that the analysis is of. */
     liveModel: LiveModelDocument;
 };
+
+/** A diagram analysis document "live" for editing. */
+export type LiveDiagramAnalysisDocument = {
+    analysisType: "diagram";
+
+    /** The ref for which this is a live document. */
+    refId: string;
+
+    /** Live document defining the analysis. */
+    liveDoc: LiveDoc<DiagramAnalysisDocument>;
+
+    /** Live diagarm that the analysis is of. */
+    liveDiagram: LiveDiagramDocument;
+};
+
+/** An analysis document "live" for editing. */
+export type LiveAnalysisDocument = LiveModelAnalysisDocument | LiveDiagramAnalysisDocument;
+
+/** Create a new analysis in the backend. */
+export async function createAnalysis(type: AnalysisType, ofRefId: string, api: Api) {
+    const init = newAnalysisDocument(type, ofRefId);
+
+    const result = await api.rpc.new_ref.mutate({
+        content: init as JsonValue,
+        permissions: {
+            anyone: "Read",
+        },
+    });
+    invariant(result.tag === "Ok", "Failed to create a new analysis");
+
+    return result.content;
+}
+
+/** Retrieve an analysis and make it "live" for editing. */
+export async function getLiveAnalysis(
+    refId: string,
+    api: Api,
+    theories: TheoryLibrary,
+): Promise<LiveAnalysisDocument> {
+    const liveDoc = await getLiveDoc<AnalysisDocument>(api, refId);
+    const { doc } = liveDoc;
+    invariant(doc.type === "analysis", () => `Expected analysis, got type: ${doc.type}`);
+
+    const analysisOf = doc.analysisOf;
+    if (analysisOf.taxon === "model") {
+        const liveModel = await getLiveModel(analysisOf.refId, api, theories);
+        return {
+            analysisType: "model",
+            refId,
+            liveDoc: liveDoc as LiveDoc<ModelAnalysisDocument>,
+            liveModel,
+        };
+    } else if (analysisOf.taxon === "diagram") {
+        const liveDiagram = await getLiveDiagram(analysisOf.refId, api, theories);
+        return {
+            analysisType: "diagram",
+            refId,
+            liveDoc: liveDoc as LiveDoc<DiagramAnalysisDocument>,
+            liveDiagram,
+        };
+    } else {
+        throw new Error(`Analysis of unknown document: ${analysisOf}`);
+    }
+}
diff --git a/packages/frontend/src/analysis/index.ts b/packages/frontend/src/analysis/index.ts
index 75521554c..89d22e5d9 100644
--- a/packages/frontend/src/analysis/index.ts
+++ b/packages/frontend/src/analysis/index.ts
@@ -1,2 +1,3 @@
 export * from "./types";
 export * from "./document";
+export * from "./context";
diff --git a/packages/frontend/src/analysis/types.ts b/packages/frontend/src/analysis/types.ts
index fc9242555..98797125f 100644
--- a/packages/frontend/src/analysis/types.ts
+++ b/packages/frontend/src/analysis/types.ts
@@ -1,32 +1,26 @@
 import type { Component } from "solid-js";
 
-import type * as catlog from "catlog-wasm";
+import type { LiveDiagramDocument } from "../diagram";
 import type { LiveModelDocument } from "../model";
 
-/** Analysis of a model of a double theory.
+/** An analysis of a formal object.
 
-Such an analysis could be a visualization, a simulation, or a translation of the
-model into another format. Analyses can have their own content or state going
-beyond the data of the model, such as numerical parameters for a simulation.
+An analysis is currently a catch-all concept for an output derived from a model,
+an instance, or other formal objects in the system. An analysis could be a
+visualization, a simulation, or a translation of the formal object into another
+format. Analyses can have their own content or internal state, such as numerical
+parameters fo a simulation.
  */
-export type ModelAnalysis = {
+export type Analysis<T> = {
     /** Identifier of the analysis, unique relative to the theory. */
     id: string;
 
     /** Content associated with the analysis. */
-    content: ModelAnalysisContent;
+    content: T;
 };
 
-/** Component that renders an analysis of a model. */
-export type ModelAnalysisComponent<T extends ModelAnalysisContent> = Component<
-    ModelAnalysisProps<T>
->;
-
-/** Props passed to a model analysis component. */
-export type ModelAnalysisProps<T> = {
-    /** The model being analyzed. */
-    liveModel: LiveModelDocument;
-
+/** Props passed to any analysis component. */
+export type AnalysisProps<T> = {
     /** Content associated with the analysis itself. */
     content: T;
 
@@ -34,33 +28,20 @@ export type ModelAnalysisProps<T> = {
     changeContent: (f: (content: T) => void) => void;
 };
 
-/** Content associated with an analysis of a model.
-
-Such content is in addition to the data of the model and can include
-configuration or state for the analysis.
- */
-export type ModelAnalysisContent =
-    | ModelGraphContent
-    | SubmodelsAnalysisContent
-    | LotkaVolterraContent;
-
-/** Configuration for a graph visualization of a model. */
-export type ModelGraphContent = {
-    tag: "graph";
-
-    /** Layout engine for graph. */
-    layout: "graphviz-directed" | "graphviz-undirected";
+/** Props passed to a model analysis component. */
+export type ModelAnalysisProps<T> = AnalysisProps<T> & {
+    /** The model being analyzed. */
+    liveModel: LiveModelDocument;
 };
 
-/** State of a submodels analysis. */
-export type SubmodelsAnalysisContent = {
-    tag: "submodels";
+/** Component that renders an analysis of a model. */
+export type ModelAnalysisComponent<T> = Component<ModelAnalysisProps<T>>;
 
-    /** Index of active submodel. */
-    activeIndex: number;
+/** Props passed to a diagram analysis component. */
+export type DiagramAnalysisProps<T> = AnalysisProps<T> & {
+    /** The diagram being analyzed. */
+    liveDiagram: LiveDiagramDocument;
 };
 
-/** Configuration for a Lotka-Volterra ODE analysis of a model. */
-export type LotkaVolterraContent = {
-    tag: "lotka-volterra";
-} & catlog.LotkaVolterraProblemData<string>;
+/** Component that renders an analysis of diagram model. */
+export type DiagramAnalysisComponent<T> = Component<DiagramAnalysisProps<T>>;
diff --git a/packages/frontend/src/api/context.ts b/packages/frontend/src/api/context.ts
index fa7fa2b9e..ac06d5e2e 100644
--- a/packages/frontend/src/api/context.ts
+++ b/packages/frontend/src/api/context.ts
@@ -1,10 +1,21 @@
 import type { Repo } from "@automerge/automerge-repo";
-import { createContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
+import invariant from "tiny-invariant";
 
 import type { RpcClient } from "./rpc";
+import type { Api } from "./types";
 
 /** Context for the Automerge repo. */
 export const RepoContext = createContext<Repo>();
 
 /** Context for the RPC client. */
 export const RpcContext = createContext<RpcClient>();
+
+/** Retrieve CatColab API from application context. */
+export function useApi(): Api {
+    const rpc = useContext(RpcContext);
+    const repo = useContext(RepoContext);
+    invariant(rpc, "RPC client should be provided as context");
+    invariant(repo, "Automerge repo should be provided as context");
+    return { rpc, repo };
+}
diff --git a/packages/frontend/src/api/document.ts b/packages/frontend/src/api/document.ts
index 600a59321..98c902cc6 100644
--- a/packages/frontend/src/api/document.ts
+++ b/packages/frontend/src/api/document.ts
@@ -11,7 +11,7 @@ import invariant from "tiny-invariant";
 import * as uuid from "uuid";
 
 import type { Permissions } from "catcolab-api";
-import type { RpcClient } from "./rpc";
+import type { Api } from "./types";
 
 /** An Automerge repo with no networking, used for read-only documents. */
 const localRepo = new Repo();
@@ -47,12 +47,9 @@ permissions, the Automerge doc handle will be "fake", existing only locally in
 the client. And if the user doesn't even have read permissions, this function
 will yield an unauthorized error!
  */
-export async function getLiveDoc<T extends object>(
-    rpc: RpcClient,
-    repo: Repo,
-    refId: string,
-): Promise<LiveDoc<T>> {
+export async function getLiveDoc<T extends object>(api: Api, refId: string): Promise<LiveDoc<T>> {
     invariant(uuid.validate(refId), () => `Invalid document ref ${refId}`);
+    const { rpc, repo } = api;
 
     const result = await rpc.get_doc.query(refId);
     if (result.tag !== "Ok") {
diff --git a/packages/frontend/src/api/types.ts b/packages/frontend/src/api/types.ts
index af660990c..5f12c94eb 100644
--- a/packages/frontend/src/api/types.ts
+++ b/packages/frontend/src/api/types.ts
@@ -1,6 +1,16 @@
+import type { Repo } from "@automerge/automerge-repo";
+
+import type { RpcClient } from "./rpc";
+
+/** Bundle of objects needed to interact with the CatColab backend API. */
+export type Api = {
+    rpc: RpcClient;
+    repo: Repo;
+};
+
 /** A reference in a document to another document. */
-export type ExternRef = {
+export type ExternRef<T extends string> = {
     tag: "extern-ref";
     refId: string;
-    taxon: string;
+    taxon: T;
 };
diff --git a/packages/frontend/src/diagram/diagram_editor.tsx b/packages/frontend/src/diagram/diagram_editor.tsx
index fce2884ac..a995926c8 100644
--- a/packages/frontend/src/diagram/diagram_editor.tsx
+++ b/packages/frontend/src/diagram/diagram_editor.tsx
@@ -1,11 +1,12 @@
 import { MultiProvider } from "@solid-primitives/context";
-import { A, useParams } from "@solidjs/router";
+import { A, useNavigate, useParams } from "@solidjs/router";
 import { Match, Show, Switch, createResource, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
-import { RepoContext, RpcContext, getLiveDoc } from "../api";
-import { InlineInput } from "../components";
-import { LiveModelContext, type ModelDocument, enlivenModelDocument } from "../model";
+import { createAnalysis } from "../analysis/document";
+import { useApi } from "../api";
+import { IconButton, InlineInput } from "../components";
+import { LiveModelContext } from "../model";
 import {
     type CellConstructor,
     type FormalCellEditorProps,
@@ -18,7 +19,7 @@ import { TheoryLibraryContext } from "../stdlib";
 import type { InstanceTypeMeta } from "../theory";
 import { MaybePermissionsButton } from "../user";
 import { LiveDiagramContext } from "./context";
-import { type DiagramDocument, type LiveDiagramDocument, enlivenDiagramDocument } from "./document";
+import { type LiveDiagramDocument, getLiveDiagram } from "./document";
 import { DiagramMorphismCellEditor } from "./morphism_cell_editor";
 import { DiagramObjectCellEditor } from "./object_cell_editor";
 import {
@@ -31,26 +32,18 @@ import {
 
 import "./diagram_editor.css";
 
+import ChartSpline from "lucide-solid/icons/chart-spline";
+
 export default function DiagramPage() {
     const params = useParams();
     const refId = params.ref;
     invariant(refId, "Must provide document ref as parameter to diagram page");
 
-    const rpc = useContext(RpcContext);
-    const repo = useContext(RepoContext);
+    const api = useApi();
     const theories = useContext(TheoryLibraryContext);
-    invariant(rpc && repo && theories, "Missing context for diagram page");
-
-    const [liveDiagram] = createResource<LiveDiagramDocument>(async () => {
-        const liveDoc = await getLiveDoc<DiagramDocument>(rpc, repo, refId);
-        const { doc } = liveDoc;
-        invariant(doc.type === "diagram", () => `Expected diagram, got type: ${doc.type}`);
+    invariant(theories, "Must provide theory library as context to diagram page");
 
-        const modelLiveDoc = await getLiveDoc<ModelDocument>(rpc, repo, doc.modelRef.refId);
-        const liveModel = enlivenModelDocument(doc.modelRef.refId, modelLiveDoc, theories);
-
-        return enlivenDiagramDocument(refId, liveDoc, liveModel);
-    });
+    const [liveDiagram] = createResource(() => getLiveDiagram(refId, api, theories));
 
     return <DiagramDocumentEditor liveDiagram={liveDiagram()} />;
 }
@@ -58,11 +51,25 @@ export default function DiagramPage() {
 export function DiagramDocumentEditor(props: {
     liveDiagram?: LiveDiagramDocument;
 }) {
+    const api = useApi();
+    const navigate = useNavigate();
+
+    const onCreateAnalysis = async (diagramRefId: string) => {
+        const newRef = createAnalysis("diagram", diagramRefId, api);
+        navigate(`/analysis/${newRef}`);
+    };
+
     return (
         <div class="growable-container">
             <BrandedToolbar>
                 <HelpButton />
                 <MaybePermissionsButton permissions={props.liveDiagram?.liveDoc.permissions} />
+                <IconButton
+                    onClick={() => props.liveDiagram && onCreateAnalysis(props.liveDiagram.refId)}
+                    tooltip="Analyze this diagram"
+                >
+                    <ChartSpline />
+                </IconButton>
             </BrandedToolbar>
             <Show when={props.liveDiagram}>
                 {(liveDiagram) => <DiagramPane liveDiagram={liveDiagram()} />}
@@ -110,11 +117,15 @@ export function DiagramNotebookEditor(props: {
     liveDiagram: LiveDiagramDocument;
 }) {
     const liveDoc = () => props.liveDiagram.liveDoc;
+    const liveModel = () => props.liveDiagram.liveModel;
+
+    const cellConstructors = () =>
+        (liveModel().theory()?.instanceTypes ?? []).map(diagramCellConstructor);
 
     return (
         <MultiProvider
             values={[
-                [LiveModelContext, props.liveDiagram.liveModel],
+                [LiveModelContext, liveModel()],
                 [LiveDiagramContext, props.liveDiagram],
             ]}
         >
@@ -126,9 +137,7 @@ export function DiagramNotebookEditor(props: {
                     liveDoc().changeDoc((doc) => f(doc.notebook));
                 }}
                 formalCellEditor={DiagramCellEditor}
-                cellConstructors={diagramCellConstructors(
-                    props.liveDiagram.liveModel.theory()?.instanceTypes ?? [],
-                )}
+                cellConstructors={cellConstructors()}
                 cellLabel={judgmentLabel}
             />
         </MultiProvider>
@@ -164,22 +173,18 @@ function DiagramCellEditor(props: FormalCellEditorProps<DiagramJudgment>) {
     );
 }
 
-function diagramCellConstructors(
-    instanceTypes: InstanceTypeMeta[],
-): CellConstructor<DiagramJudgment>[] {
-    return instanceTypes.map((meta) => {
-        const { name, description, shortcut } = meta;
-        return {
-            name,
-            description,
-            shortcut: shortcut && [cellShortcutModifier, ...shortcut],
-            construct() {
-                return meta.tag === "ObType"
-                    ? newFormalCell(newDiagramObjectDecl(meta.obType))
-                    : newFormalCell(newDiagramMorphismDecl(meta.morType));
-            },
-        };
-    });
+function diagramCellConstructor(meta: InstanceTypeMeta): CellConstructor<DiagramJudgment> {
+    const { name, description, shortcut } = meta;
+    return {
+        name,
+        description,
+        shortcut: shortcut && [cellShortcutModifier, ...shortcut],
+        construct() {
+            return meta.tag === "ObType"
+                ? newFormalCell(newDiagramObjectDecl(meta.obType))
+                : newFormalCell(newDiagramMorphismDecl(meta.morType));
+        },
+    };
 }
 
 function judgmentLabel(judgment: DiagramJudgment): string | undefined {
diff --git a/packages/frontend/src/diagram/document.ts b/packages/frontend/src/diagram/document.ts
index 6c88441fa..fbc967dd2 100644
--- a/packages/frontend/src/diagram/document.ts
+++ b/packages/frontend/src/diagram/document.ts
@@ -1,9 +1,12 @@
 import { type Accessor, createMemo } from "solid-js";
+import invariant from "tiny-invariant";
 
+import type { JsonValue } from "catcolab-api";
 import type { DblModelDiagram, ModelDiagramValidationResult, Uuid } from "catlog-wasm";
-import type { ExternRef, LiveDoc } from "../api";
-import type { LiveModelDocument } from "../model";
+import { type Api, type ExternRef, type LiveDoc, getLiveDoc } from "../api";
+import { type LiveModelDocument, getLiveModel } from "../model";
 import { type Notebook, newNotebook } from "../notebook";
+import type { TheoryLibrary } from "../stdlib";
 import { type IndexedMap, indexMap } from "../util/indexing";
 import { type DiagramJudgment, catlogDiagram } from "./types";
 
@@ -15,7 +18,7 @@ export type DiagramDocument = {
     name: string;
 
     /** Reference to the model that the diagram is in. */
-    modelRef: ExternRef & { taxon: "model" };
+    modelRef: ExternRef<"model">;
 
     /** Content of the diagram. */
     notebook: Notebook<DiagramJudgment>;
@@ -61,7 +64,7 @@ export type ValidatedDiagram = {
     result: ModelDiagramValidationResult;
 };
 
-export function enlivenDiagramDocument(
+function enlivenDiagramDocument(
     refId: string,
     liveDoc: LiveDoc<DiagramDocument>,
     liveModel: LiveModelDocument,
@@ -102,3 +105,33 @@ export function enlivenDiagramDocument(
 
     return { refId, liveDoc, liveModel, formalJudgments, objectIndex, validatedDiagram };
 }
+
+/** Create a new diagram in the backend. */
+export async function createDiagram(modelRefId: string, api: Api): Promise<string> {
+    const init = newDiagramDocument(modelRefId);
+
+    const result = await api.rpc.new_ref.mutate({
+        content: init as JsonValue,
+        permissions: {
+            anyone: "Read",
+        },
+    });
+    invariant(result.tag === "Ok", "Failed to create a new diagram");
+
+    return result.content;
+}
+
+/** Retrieve a diagram from the backend and make it "live" for editing. */
+export async function getLiveDiagram(
+    refId: string,
+    api: Api,
+    theories: TheoryLibrary,
+): Promise<LiveDiagramDocument> {
+    const liveDoc = await getLiveDoc<DiagramDocument>(api, refId);
+    const { doc } = liveDoc;
+    invariant(doc.type === "diagram", () => `Expected diagram, got type: ${doc.type}`);
+
+    const liveModel = await getLiveModel(doc.modelRef.refId, api, theories);
+
+    return enlivenDiagramDocument(refId, liveDoc, liveModel);
+}
diff --git a/packages/frontend/src/model/document.ts b/packages/frontend/src/model/document.ts
index 1839178ee..e8f2979d1 100644
--- a/packages/frontend/src/model/document.ts
+++ b/packages/frontend/src/model/document.ts
@@ -1,7 +1,9 @@
 import { type Accessor, createMemo } from "solid-js";
+import invariant from "tiny-invariant";
 
+import type { JsonValue } from "catcolab-api";
 import type { DblModel, ModelValidationResult, Uuid } from "catlog-wasm";
-import type { LiveDoc } from "../api";
+import { type Api, type LiveDoc, getLiveDoc } from "../api";
 import { type Notebook, newNotebook } from "../notebook";
 import type { TheoryLibrary } from "../stdlib";
 import type { Theory, TheoryId } from "../theory";
@@ -62,7 +64,7 @@ export type ValidatedModel = {
     result: ModelValidationResult;
 };
 
-export function enlivenModelDocument(
+function enlivenModelDocument(
     refId: string,
     liveDoc: LiveDoc<ModelDocument>,
     theories: TheoryLibrary,
@@ -126,3 +128,36 @@ export function enlivenModelDocument(
         validatedModel,
     };
 }
+
+/** Create a new model in the backend.
+
+Returns the ref ID of the created document.
+ */
+export async function createModel(api: Api, init?: ModelDocument): Promise<string> {
+    if (init === undefined) {
+        init = newModelDocument();
+    }
+
+    const result = await api.rpc.new_ref.mutate({
+        content: init as JsonValue,
+        permissions: {
+            anyone: "Read",
+        },
+    });
+    invariant(result.tag === "Ok", "Failed to create model");
+
+    return result.content;
+}
+
+/** Retrieve a model from the backend and make it "live" for editing. */
+export async function getLiveModel(
+    refId: string,
+    api: Api,
+    theories: TheoryLibrary,
+): Promise<LiveModelDocument> {
+    const liveDoc = await getLiveDoc<ModelDocument>(api, refId);
+    const { doc } = liveDoc;
+    invariant(doc.type === "model", () => `Expected model, got type: ${doc.type}`);
+
+    return enlivenModelDocument(refId, liveDoc, theories);
+}
diff --git a/packages/frontend/src/model/model_editor.tsx b/packages/frontend/src/model/model_editor.tsx
index a801b403c..a25677344 100644
--- a/packages/frontend/src/model/model_editor.tsx
+++ b/packages/frontend/src/model/model_editor.tsx
@@ -2,11 +2,10 @@ import { useNavigate, useParams } from "@solidjs/router";
 import { Match, Show, Switch, createResource, useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
-import type { JsonValue } from "catcolab-api";
-import { newAnalysisDocument } from "../analysis/document";
-import { RepoContext, RpcContext, getLiveDoc } from "../api";
+import { createAnalysis } from "../analysis/document";
+import { useApi } from "../api";
 import { IconButton, InlineInput } from "../components";
-import { newDiagramDocument } from "../diagram";
+import { createDiagram } from "../diagram/document";
 import {
     type CellConstructor,
     type FormalCellEditorProps,
@@ -19,7 +18,7 @@ import { TheoryLibraryContext } from "../stdlib";
 import type { ModelTypeMeta } from "../theory";
 import { MaybePermissionsButton } from "../user";
 import { LiveModelContext } from "./context";
-import { type LiveModelDocument, type ModelDocument, enlivenModelDocument } from "./document";
+import { type LiveModelDocument, getLiveModel } from "./document";
 import { MorphismCellEditor } from "./morphism_cell_editor";
 import { ObjectCellEditor } from "./object_cell_editor";
 import { TheorySelectorDialog } from "./theory_selector";
@@ -41,15 +40,11 @@ export default function ModelPage() {
     const refId = params.ref;
     invariant(refId, "Must provide model ref as parameter to model page");
 
-    const rpc = useContext(RpcContext);
-    const repo = useContext(RepoContext);
+    const api = useApi();
     const theories = useContext(TheoryLibraryContext);
-    invariant(rpc && repo && theories, "Missing context for model page");
+    invariant(theories, "Must provide theory library as context to model page");
 
-    const [liveModel] = createResource<LiveModelDocument>(async () => {
-        const liveDoc = await getLiveDoc<ModelDocument>(rpc, repo, refId);
-        return enlivenModelDocument(refId, liveDoc, theories);
-    });
+    const [liveModel] = createResource(() => getLiveModel(refId, api, theories));
 
     return <ModelDocumentEditor liveModel={liveModel()} />;
 }
@@ -57,38 +52,16 @@ export default function ModelPage() {
 export function ModelDocumentEditor(props: {
     liveModel?: LiveModelDocument;
 }) {
-    const rpc = useContext(RpcContext);
-    invariant(rpc, "Missing context for model document editor");
-
+    const api = useApi();
     const navigate = useNavigate();
 
-    const createDiagram = async (modelRefId: string) => {
-        const init = newDiagramDocument(modelRefId);
-
-        const result = await rpc.new_ref.mutate({
-            content: init as JsonValue,
-            permissions: {
-                anyone: "Read",
-            },
-        });
-        invariant(result.tag === "Ok", "Failed to create a new diagram");
-        const newRef = result.content;
-
+    const onCreateDiagram = async (modelRefId: string) => {
+        const newRef = await createDiagram(modelRefId, api);
         navigate(`/diagram/${newRef}`);
     };
 
-    const createAnalysis = async (modelRefId: string) => {
-        const init = newAnalysisDocument(modelRefId);
-
-        const result = await rpc.new_ref.mutate({
-            content: init as JsonValue,
-            permissions: {
-                anyone: "Read",
-            },
-        });
-        invariant(result.tag === "Ok", "Failed to create a new analysis");
-        const newRef = result.content;
-
+    const onCreateAnalysis = async (modelRefId: string) => {
+        const newRef = await createAnalysis("model", modelRefId, api);
         navigate(`/analysis/${newRef}`);
     };
 
@@ -99,14 +72,14 @@ export function ModelDocumentEditor(props: {
                 <MaybePermissionsButton permissions={props.liveModel?.liveDoc.permissions} />
                 <Show when={props.liveModel?.theory()?.supportsInstances}>
                     <IconButton
-                        onClick={() => props.liveModel && createDiagram(props.liveModel.refId)}
+                        onClick={() => props.liveModel && onCreateDiagram(props.liveModel.refId)}
                         tooltip="Create a diagram in this model"
                     >
                         <Network />
                     </IconButton>
                 </Show>
                 <IconButton
-                    onClick={() => props.liveModel && createAnalysis(props.liveModel.refId)}
+                    onClick={() => props.liveModel && onCreateAnalysis(props.liveModel.refId)}
                     tooltip="Analyze this model"
                 >
                     <ChartSpline />
@@ -166,6 +139,9 @@ export function ModelNotebookEditor(props: {
 }) {
     const liveDoc = () => props.liveModel.liveDoc;
 
+    const cellConstructors = () =>
+        (props.liveModel.theory()?.modelTypes ?? []).map(modelCellConstructor);
+
     return (
         <LiveModelContext.Provider value={props.liveModel}>
             <NotebookEditor
@@ -176,7 +152,7 @@ export function ModelNotebookEditor(props: {
                     liveDoc().changeDoc((doc) => f(doc.notebook));
                 }}
                 formalCellEditor={ModelCellEditor}
-                cellConstructors={modelCellConstructors(props.liveModel.theory()?.modelTypes ?? [])}
+                cellConstructors={cellConstructors()}
                 cellLabel={judgmentLabel}
             />
         </LiveModelContext.Provider>
@@ -210,20 +186,18 @@ function ModelCellEditor(props: FormalCellEditorProps<ModelJudgment>) {
     );
 }
 
-function modelCellConstructors(modelTypes: ModelTypeMeta[]): CellConstructor<ModelJudgment>[] {
-    return modelTypes.map((meta) => {
-        const { name, description, shortcut } = meta;
-        return {
-            name,
-            description,
-            shortcut: shortcut && [cellShortcutModifier, ...shortcut],
-            construct() {
-                return meta.tag === "ObType"
-                    ? newFormalCell(newObjectDecl(meta.obType))
-                    : newFormalCell(newMorphismDecl(meta.morType));
-            },
-        };
-    });
+function modelCellConstructor(meta: ModelTypeMeta): CellConstructor<ModelJudgment> {
+    const { name, description, shortcut } = meta;
+    return {
+        name,
+        description,
+        shortcut: shortcut && [cellShortcutModifier, ...shortcut],
+        construct() {
+            return meta.tag === "ObType"
+                ? newFormalCell(newObjectDecl(meta.obType))
+                : newFormalCell(newMorphismDecl(meta.morType));
+        },
+    };
 }
 
 function judgmentLabel(judgment: ModelJudgment): string | undefined {
diff --git a/packages/frontend/src/stdlib/analyses/lotka_volterra.tsx b/packages/frontend/src/stdlib/analyses/lotka_volterra.tsx
index e1f4f338f..fa1283071 100644
--- a/packages/frontend/src/stdlib/analyses/lotka_volterra.tsx
+++ b/packages/frontend/src/stdlib/analyses/lotka_volterra.tsx
@@ -1,7 +1,13 @@
 import { createMemo } from "solid-js";
 
-import type { DblModel, JsResult, LotkaVolterraModelData, ODEResult } from "catlog-wasm";
-import type { LotkaVolterraContent, ModelAnalysisProps } from "../../analysis";
+import type {
+    DblModel,
+    JsResult,
+    LotkaVolterraModelData,
+    LotkaVolterraProblemData,
+    ODEResult,
+} from "catlog-wasm";
+import type { ModelAnalysisProps } from "../../analysis";
 import {
     type ColumnSchema,
     FixedTableEditor,
@@ -14,6 +20,11 @@ import { type ODEPlotData, ODEResultPlot } from "../../visualization";
 
 import "./simulation.css";
 
+/** Configuration for a Lotka-Volterra ODE analysis of a model. */
+export type LotkaVolterraContent = {
+    tag: "lotka-volterra";
+} & LotkaVolterraProblemData<string>;
+
 type Simulator = (model: DblModel, data: LotkaVolterraModelData) => ODEResult;
 
 /** Configure a Lotka-Volterra ODE analysis for use with models of a theory. */
diff --git a/packages/frontend/src/stdlib/analyses/model_graph.tsx b/packages/frontend/src/stdlib/analyses/model_graph.tsx
index a5a9fcdf6..41ca6cd7c 100644
--- a/packages/frontend/src/stdlib/analyses/model_graph.tsx
+++ b/packages/frontend/src/stdlib/analyses/model_graph.tsx
@@ -1,8 +1,7 @@
 import type * as Viz from "@viz-js/viz";
 import { Show, createSignal } from "solid-js";
 
-import type { ModelAnalysisProps, ModelGraphContent } from "../../analysis";
-
+import type { ModelAnalysisProps } from "../../analysis";
 import type { ModelJudgment } from "../../model";
 import type { ModelAnalysisMeta, ModelTypeMeta, Theory } from "../../theory";
 import { DownloadSVGButton, GraphvizSVG, type SVGRefProp } from "../../visualization";
@@ -10,6 +9,14 @@ import { DownloadSVGButton, GraphvizSVG, type SVGRefProp } from "../../visualiza
 import textStyles from "../text_styles.module.css";
 import baseStyles from "./base_styles.module.css";
 
+/** Configuration for a graph visualization of a model. */
+export type ModelGraphContent = {
+    tag: "graph";
+
+    /** Layout engine for graph. */
+    layout: "graphviz-directed" | "graphviz-undirected";
+};
+
 /** Configure a graph visualization for use with models of a double theory. */
 export function configureModelGraph(options: {
     id: string;
diff --git a/packages/frontend/src/stdlib/analyses/stock_flow_diagram.tsx b/packages/frontend/src/stdlib/analyses/stock_flow_diagram.tsx
index b8db85eff..6851d2e4e 100644
--- a/packages/frontend/src/stdlib/analyses/stock_flow_diagram.tsx
+++ b/packages/frontend/src/stdlib/analyses/stock_flow_diagram.tsx
@@ -2,7 +2,7 @@ import type * as Viz from "@viz-js/viz";
 import { type Component, For, Show, createResource, createSignal } from "solid-js";
 import { P, match } from "ts-pattern";
 
-import type { ModelAnalysisProps, ModelGraphContent } from "../../analysis";
+import type { ModelAnalysisProps } from "../../analysis";
 import type { ModelJudgment } from "../../model";
 import type { ModelAnalysisMeta, Theory } from "../../theory";
 import { uniqueIndexArray } from "../../util/indexing";
@@ -17,7 +17,12 @@ import {
     loadViz,
     vizLayoutGraph,
 } from "../../visualization";
-import { type GraphvizAttributes, graphvizEngine, modelToGraphviz } from "./model_graph";
+import {
+    type GraphvizAttributes,
+    type ModelGraphContent,
+    graphvizEngine,
+    modelToGraphviz,
+} from "./model_graph";
 
 import baseStyles from "./base_styles.module.css";
 
diff --git a/packages/frontend/src/stdlib/analyses/submodel_graphs.tsx b/packages/frontend/src/stdlib/analyses/submodel_graphs.tsx
index a80e4af52..2d1cc4536 100644
--- a/packages/frontend/src/stdlib/analyses/submodel_graphs.tsx
+++ b/packages/frontend/src/stdlib/analyses/submodel_graphs.tsx
@@ -4,7 +4,7 @@ import ChevronRight from "lucide-solid/icons/chevron-right";
 import { Show } from "solid-js";
 
 import type { DblModel } from "catlog-wasm";
-import type { ModelAnalysisProps, SubmodelsAnalysisContent } from "../../analysis";
+import type { ModelAnalysisProps } from "../../analysis";
 import { IconButton } from "../../components";
 import type { ModelJudgment } from "../../model";
 import type { ModelAnalysisMeta, Theory } from "../../theory";
@@ -13,6 +13,14 @@ import { type GraphvizAttributes, ModelGraphviz } from "./model_graph";
 import baseStyles from "./base_styles.module.css";
 import "./submodel_graphs.css";
 
+/** State of a submodels analysis. */
+export type SubmodelsAnalysisContent = {
+    tag: "submodels";
+
+    /** Index of active submodel. */
+    activeIndex: number;
+};
+
 /** Configure a submodel analysis for use with a double theory. */
 export function configureSubmodelsAnalysis(options: {
     id: string;
diff --git a/packages/frontend/src/theory/types.ts b/packages/frontend/src/theory/types.ts
index 33360e848..d5eafe64d 100644
--- a/packages/frontend/src/theory/types.ts
+++ b/packages/frontend/src/theory/types.ts
@@ -2,7 +2,7 @@ import type { KbdKey } from "@solid-primitives/keyboard";
 
 import type { DblTheory, MorType, ObType } from "catlog-wasm";
 import { MorTypeIndex, ObTypeIndex } from "catlog-wasm";
-import type { ModelAnalysisComponent, ModelAnalysisContent } from "../analysis";
+import type { DiagramAnalysisComponent, ModelAnalysisComponent } from "../analysis";
 import { uniqueIndexArray } from "../util/indexing";
 import type { ArrowStyle } from "../visualization";
 
@@ -40,6 +40,7 @@ export class Theory {
     private readonly modelTypeMeta: TypeMetadata<ModelObTypeMeta, ModelMorTypeMeta>;
     private readonly instanceTypeMeta: TypeMetadata<InstanceObTypeMeta, InstanceMorTypeMeta>;
     private readonly modelAnalysisMap: Map<string, ModelAnalysisMeta>;
+    private readonly diagramAnalysisMap: Map<string, DiagramAnalysisMeta>;
 
     constructor(props: {
         id: string;
@@ -51,6 +52,7 @@ export class Theory {
         onlyFreeModels?: boolean;
         instanceOfName?: string;
         instanceTypes?: InstanceTypeMeta[];
+        diagramAnalyses?: DiagramAnalysisMeta[];
     }) {
         // Theory.
         this.id = props.id;
@@ -68,6 +70,7 @@ export class Theory {
         this.instanceTypeMeta = new TypeMetadata<InstanceObTypeMeta, InstanceMorTypeMeta>(
             props.instanceTypes,
         );
+        this.diagramAnalysisMap = uniqueIndexArray(props.diagramAnalyses ?? [], (meta) => meta.id);
     }
 
     /** Metadata for types in the theory, as used in models.
@@ -121,6 +124,16 @@ export class Theory {
     modelAnalysis(id: string): ModelAnalysisMeta | undefined {
         return this.modelAnalysisMap.get(id);
     }
+
+    /** List of analyses defined for diagrams. */
+    get diagramAnalyses(): Array<DiagramAnalysisMeta> {
+        return Array.from(this.diagramAnalysisMap.values());
+    }
+
+    /** Get metadata for a diagram analysis. */
+    diagramAnalysis(id: string): DiagramAnalysisMeta | undefined {
+        return this.diagramAnalysisMap.get(id);
+    }
 }
 
 /** Unique identifier of a theory configured for the frontend. */
@@ -210,9 +223,9 @@ export type ModelMorTypeMeta = BaseTypeMeta &
 
         /** Whether morphisms of this type are typically unnamed.
 
-    By default, morphisms (like objects) have names but for certain morphism
-    types in certain domains, it is common to leave them unnamed.
-     */
+        By default, morphisms (like objects) have names but for certain morphism
+        types in certain domains, it is common to leave them unnamed.
+        */
         preferUnnamed?: boolean;
     };
 
@@ -225,10 +238,8 @@ export type InstanceObTypeMeta = BaseTypeMeta & HasObTypeMeta;
 /** Metadata for a morphism type as used in instances. */
 export type InstanceMorTypeMeta = BaseTypeMeta & HasMorTypeMeta;
 
-/** Specifies an analysis of model with descriptive metadata.
- */
-// biome-ignore lint/suspicious/noExplicitAny: content type is data dependent.
-export type ModelAnalysisMeta<T extends ModelAnalysisContent = any> = {
+/** Specifies an analysis with descriptive metadata. */
+export type AnalysisMeta<T> = {
     /** Identifier of analysis, unique relative to the theory. */
     id: string;
 
@@ -238,9 +249,20 @@ export type ModelAnalysisMeta<T extends ModelAnalysisContent = any> = {
     /** Short description of analysis. */
     description?: string;
 
+    /** Default content created when the analysis is added. */
+    initialContent: () => T;
+};
+
+/** Specifies a model analysis with descriptive metadata. */
+// biome-ignore lint/suspicious/noExplicitAny: content type is data dependent.
+export type ModelAnalysisMeta<T = any> = AnalysisMeta<T> & {
     /** Component that renders the analysis. */
     component: ModelAnalysisComponent<T>;
+};
 
-    /** Default content created when the analysis is added. */
-    initialContent: () => T;
+/** Specifies a diagram analysis with descriptive metadata. */
+// biome-ignore lint/suspicious/noExplicitAny: content type is data dependent.
+export type DiagramAnalysisMeta<T = any> = AnalysisMeta<T> & {
+    /** Component that renders the analysis. */
+    component: DiagramAnalysisComponent<T>;
 };
diff --git a/packages/frontend/src/user/login.tsx b/packages/frontend/src/user/login.tsx
index 288170a23..5aa6ed56d 100644
--- a/packages/frontend/src/user/login.tsx
+++ b/packages/frontend/src/user/login.tsx
@@ -10,10 +10,9 @@ import {
     signInWithPopup,
 } from "firebase/auth";
 import { useFirebaseApp } from "solid-firebase";
-import { useContext } from "solid-js";
 import invariant from "tiny-invariant";
 
-import { RpcContext } from "../api";
+import { useApi } from "../api";
 import { IconButton } from "../components";
 
 import SignInIcon from "lucide-solid/icons/log-in";
@@ -29,9 +28,8 @@ type EmailAndPassword = {
 export function Login(props: {
     onComplete?: (user: User) => void;
 }) {
+    const api = useApi();
     const firebaseApp = useFirebaseApp();
-    const rpc = useContext(RpcContext);
-    invariant(rpc);
 
     const [, { Form, Field }] = createForm<EmailAndPassword>();
 
@@ -72,7 +70,7 @@ export function Login(props: {
     };
 
     const completeSignUpOrSignIn = async (cred: UserCredential) => {
-        const result = await rpc.sign_up_or_sign_in.mutate();
+        const result = await api.rpc.sign_up_or_sign_in.mutate();
         invariant(result.tag === "Ok");
         props.onComplete?.(cred.user);
     };