@ls1intum/apollon
Advanced tools
Weekly downloads
Readme
A UML modeling editor written in React and TypeScript.
The user interface of Apollon is simple to use. It works just like any other office and drawing tool that most users are familiar with.
Diagram Type
menu. This selection determines the availability of elements that the user can use while drawing their diagram, making it easier for users who are newly introduced to modeling.German
and English
.Apollon allows user to draw their diagram more flexibly. You can use keyboard shortcuts to copy, paste, delete and move the elements throughout the canvas. The layout of the connection is drawn automatically by the editor. However, if you want to manually layout the relationship path, use the existing waypoints feature to do so. All you have to do is to hover over the relationship, and simply drag the displayed waypoint as required. Elements of diagram can also be resized from all of its four corner.
Apollon provides an infinite canvas. With the availability of this canvas, you will never feel you're out of space while drawing your diagram. It also provides positioning rulers (grid) which can be used as a guideline to place your elements. All the elements are snapped perfectly to the grid.
Apollon allows you to create a wide range of UML diagrams. Currently, it supports creating 11 different UML diagrams. The list of UML diagrams includes:
Class Diagram
Object Diagram
Activity Diagram
Use Case Diagram
Communication Diagram
Component Diagram
Deployment Diagram
Petri Net Diagram
Reachability Graph
Syntax Tree
Flowchart
Apollon can be integrated to any other Javascript application.
It serves as the modeling editor for the widely used interactive learning platform called Artemis.
It also provides the standalone version of the editor.
You can try the standalone version of Apollon completey free and without the necessity of creating any account.
It is a web application that allows users to use Apollon editor directly from their browser with additional features, including but not limited to, sharing and exporting the diagram.
It can be accessed via https://apollon.ase.in.tum.de.
The GitHub repository of its Standalone version is https://github.com/ls1intum/Apollon_standalone
Install the @ls1intum/apollon
npm package using either yarn or npm:
yarn add @ls1intum/apollon
Import the ApollonEditor
class, which is the default export of the npm package:
import ApollonEditor from '@ls1intum/apollon';
Get hold of a DOM node and mount a new instance of the Apollon editor into it:
const container = document.getElementById("...");
const editor = new ApollonEditor(container);
To unmount the editor instance, call its destroy()
method:
editor.destroy();
For a complete overview of the API, please refer to the [lib/es6/index.d.ts] file.
Apollon provides both an ESModules, as well as CommonJS version to be included.
They lay in lib/es6
and lib/es5
and the correct version should be resolved automatically.
Clone the repository and change into the Apollon
directory:
git clone https://github.com/ls1intum/Apollon.git
cd Apollon
Install all node dependencies:
yarn install
Launch the webpack-dev-server:
yarn start
The webpack-dev-server is now listening on http://localhost:8888. If you change a TypeScript file, webpack will automatically compile the code, bundle the application, and refresh the page in your browser.
FAQs
A UML diagram editor.
The npm package @ls1intum/apollon receives a total of 858 weekly downloads. As such, @ls1intum/apollon popularity was classified as not popular.
We found that @ls1intum/apollon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.