annotations

Appearance

Ogma AnnotationsDraw annotations on top of your Ogma graphs

A powerful plugin with React integration for adding interactive annotations to your graph visualizations

Get Started
TypeScript API
React Integration
✏️

Interactive Drawing

Let users create arrows and text annotations with intuitive click-and-drag interactions

🎨

Fully Customizable

Control every aspect of your annotations - colors, fonts, line styles, arrow heads, and more

💾

Persistence and Export

You can easily save, load, and export annotations in GeoJSON format, as well as export to PNG/SVG images

📘

TypeScript Support

Built with TypeScript for complete type safety and excellent IDE autocomplete

⚛️

React Integration

Ready-to-use React hooks and context provider for seamless integration with React apps

🚀

Production Ready

Battle-tested in production applications with comprehensive documentation

Why Use Ogma Annotations? ​

Annotations enhance graph visualizations by allowing you to:

  • Document insights directly on the graph with arrows and labels
  • Guide users by highlighting important nodes, edges, or patterns
  • Create presentations with visual explanations embedded in the graph
  • Enable collaboration by letting users mark up and comment on visualizations
  • Build interactive tools for graph analysis and exploration

Quick Example ​

typescript
import { Ogma } from "@linkurious/ogma";
import { Control, createArrow, createText } from "@linkurious/ogma-annotations";

const ogma = new Ogma({ container: "graph-container" });
const controller = new Control(ogma);

// Add an arrow annotation
const arrow = createArrow(0, 0, 100, 100, {
  stroke: "#ff6b6b",
  strokeWidth: 3
});
controller.add(arrow);

// Add a text annotation
const text = createText(50, 50, "Important Node", {
  color: "#4ecdc4",
  fontSize: 16
});
controller.add(text);
tsx
import { Ogma } from "@linkurious/ogma-react";
import {
  AnnotationsContextProvider,
  useAnnotationsContext
} from "@linkurious/ogma-annotations-react";
import { createArrow } from "@linkurious/ogma-annotations";

function AnnotationTools() {
  const { editor } = useAnnotationsContext();
  const ogma = useOgma();

  const addArrow = () => {
    ogma.events.once("click", (evt) => {
      const { x, y } = ogma.view.screenToGraphCoordinates(evt);
      const arrow = createArrow(x, y, x, y, { stroke: "#ff6b6b" });
      editor.startArrow(x, y, arrow);
    });
  };

  return <button onClick={addArrow}>Add Arrow</button>;
}

function App() {
  return (
    <Ogma>
      <AnnotationsContextProvider>
        <AnnotationTools />
      </AnnotationsContextProvider>
    </Ogma>
  );
}

What's Next? ​