Tutorials

Write the codeInstall the library and render your first graph.Install → Hello world → Key conceptsStart →Build with AIInstall the Ogma skill for your AI assistant and describe the graph in plain language.Install the skill → Write a promptStart →

Getting started: all 16 tutorials

• What is Ogma?
• Compatibility
• Installing the library
• Installing in CI / automated environments
• Key concepts
• Hello world!
• Loading data
• Exports
• Working with graph data
• Visual styles
• Camera
• Layouts
• Filters
• Interactions
• Integration
• Build with AI

Data sources

Load graphs from databases and custom formats.

Neo4jAmazon NeptuneGoogle SpannerMongoDBOracleJanusGraphCustom format

Learn the API

Data APIAdd, find and update nodes and edges.

StylingColors, sizes, icons and style rules.Styling APIOptimizing stylesIcon fonts

InteractionsMouse, keyboard and selection events. LayoutsTune force, hierarchical and sequential layouts.

TransformationsGroup, filter and reshape the graph without changing the data.Transformations APIGrouping

Geo modeShow the graph on a map.LeafletEsri ArcGIS

PerformanceKeep large graphs fast.Best practicesRenderer state

Node.js exportRender and export graphs on the server.

Connect your stack

FrameworksTypeScriptReactogma-react wrapperReact hooksReact + ReduxReact ContextAngularVueSvelteSolidJupyterTesting

BundlersViteWebpackRollupParcelClosure Compiler

Legacy setups

FrameworksReact class componentsAngular 9

BundlersBrowserifySystemJSRequireJS

Tools

PlaygroundDevelopment buildOptional dependencies