Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

371 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OntoCanvas

OntoCanvas

Unit Tests E2E Tests

OntoCanvas is an intuitive ontology editor and visualizer that runs directly in your browser.

image

Why use OntoCanvas?

Find a comparison with other editors/viewers below. Essentially:

  • other editors are less user-friendly (although they can be more powerful)
  • other editors require installation on your machine
  • other viewers do not offer customisable styling for displaying the ontology,
  • other viewers do not allow you to view the ontology with a clear taxonomical view, if present

Therefore, good reasons to use Ontocanvas are: if you want a good hierarchical (taxonomical) view of ontologies, rather than a messy graph; if you want an intuitive, quick, visual way to browse and tweak an ontology (especially class hierarchies and relationships) without installing anything.

In this context, an ontology is a structured map of meaning, shaped like a graph: it defines the important kinds of things in a domain -- like “Person” and "Name" and "Address" -- and the relationships between them, so people and software share the same understanding. Ontologies are useful as mind maps or for complex tasks involving graph databases or Neural Networks.

OntoCanvas helps you design and explore these maps in an intuitive, visual way, so you can discuss and refine how your world is organised without needing to touch code or learn formal ontology logic.

Features

  • Layout styles – Hierarchical (taxonomical/weighted) or force-directed
  • Editing – Visually add/remove nodes (classes) and edges (object properties) rename classes, add data relationships, Annotation Properties.
  • Nodes and edges styling based on rules: font size, line colour, rule based, great for presentations.
  • Search – Filter by node label or relationship type
  • Relationships filters – Show/hide by relationship type
  • Open: any RDF format supported by rdf-parse — Turtle (.ttl, .turtle), RDF/XML / OWL (.owl, .rdf), JSON-LD (.jsonld, .json), N-Triples, N3, TriG, and more.
  • Save: Turtle only. When editing a Turtle file, a minimal-diff, formatting-preserving serializer rewrites only the lines an edit touches — keeping comments, blank lines, section dividers, property order, typed literals, rdf:type notation, and OWL restrictions (including multi-line rdfs:subClassOf lists) intact (see Serialization (saving)).

Comparison with other ontology editors and visualisers

Tool Pros Cons
OntoCanvas (this tool) Hierarchical view – clear tree layout for class hierarchies; simple fast edits – add/remove nodes and edges, rename, undo/redo; browser-based, no install; multi-format load (Turtle, RDF/XML, JSON-LD, etc.), save as Turtle; lightweight, no server Limited OWL expressivity; no reasoner; no SPARQL; focused on class hierarchy + relationships
WebVOWL Web-based visualization; well-established tool; SVG export; good for exploring ontology structure Primarily visualization only, no editing; only "free nodes" mode (no hierarchical view) – makes complex ontologies difficult to understand; only visualisation, no authoring
Protégé / WebProtégé Industry standard; full OWL support; reasoner integration; plugins; collaborative (WebProtégé) Not very visual; steep learning curve; heavy; form-based, not graph-first
Onto4ALL The most similar alternative, with box-and-arrow visual currently host server not working; it's not a static page, so it requires a server to be maintained (PHP); fewer features, no custom display options, no display or management of imported ontologies, basic editing, etc.; not widely maintained
yEd + manual export Generic graph editor; flexible layout; familiar No ontology semantics; manual translation to TTL; no round-trip
OWLGrEd UML-style diagrams; good for drawing class diagrams; OWL export Desktop app; less interactive; diagram-first, not live graph
VocBench 3 Web-based; strong for SKOS; light OWL; validation Focused on vocabularies, not full ontology modeling; unintuitive.
metaphactory Commercial KG platform; visual ontology modeling; enterprise features Paid; heavyweight; requires setup
GraphDB Workbench Triplestore UI; graph visualisation; SPARQL; query results as graph Editor is secondary; not designed for ontology authoring
LinkedDataHub Low-code RDF/KG; forms + graph views; flexible Complex setup; more data than schema oriented
TopBraid Composer Full OWL; visual + form; SPARQL; Eclipse-based Commercial; desktop; heavyweight
Semaforer Lightweight; web-based; simple Limited scope; less mature
Neon OWL 2; ontology evolution; change tracking Research tool; less mainstream

Tech stack

  • Vite – Build tool
  • TypeScript – Type safety
  • rdf-parse – Multi-format RDF parsing (Turtle, RDF/XML, JSON-LD, etc.) in the browser
  • N3.js – In-memory RDF store and Turtle serialisation (save)
  • vis-network – Graph visualization

Serialization (saving)

Input can be any RDF format rdf-parse understands; output is always Turtle. How the Turtle is produced depends on how the file was loaded:

  • Turtle file loaded (.ttl)minimal-diff, formatting-preserving save
    The app keeps a source cache of the original file (block positions, formatting, line endings) and a custom serializer rewrites only the lines an edit actually touches. Unedited content stays byte-for-byte identical, so saving after an edit produces a clean, reviewable diff. Preserved across edits:

    • indentation, blank lines, line endings, and #### … #### section dividers;
    • comments, property order, and typed literals (e.g. "true"^^xsd:boolean is not rewritten to true);
    • rdf:type notation (not rewritten to a);
    • OWL restrictions as inline blank nodes, including multi-line rdfs:subClassOf lists (one item per line) — adding a relationship appends a new item without reflowing the existing ones.

    This holds for renaming a class, adding/changing/removing a comment, adding/deleting a class, adding/editing/removing edges and restrictions, editing object/data properties, toggling annotation properties, and editing example images. The behaviour is pinned by the minimal-diff test suite in tests/unit/customSerializerTests/.

  • Other format loaded (RDF/XML, JSON-LD, N-Triples, …) or no source cache
    Saving falls back to standard Turtle serialization (rdflib). Output is valid Turtle, but the original formatting, comments, and property order are not preserved — the file is effectively converted to a fresh Turtle dump.

So for round-trip editing with minimal diffs, open a .ttl file and save again; opening any other format and saving converts it to Turtle.

Setup

npm install

Development

npm run dev

Open http://localhost:5173 in your browser.

Build

npm run build

Output is in dist/. Deploy the contents to any static host (e.g. GitHub Pages).

Testing

npm run test        # Run tests once
npm run test:watch  # Run tests in watch mode

Tests cover load (parse), edit (label update), save (serialize), and round-trip consistency with E2E tests.

About

Ontology visual editor

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages