OGRAM

An Organogram Generator for Teams and Organizations.

Core Features

Experience a streamlined workflow with these features:

• Org Chart Creation: Build role-based organizational charts with ease.
• Drag-and-Drop Interface: Effortlessly rearrange roles and hierarchies.
• Location Management: Define and manage multiple locations for your organization.
• Assign Members to Roles: Link team members to their respective roles.
• Define Responsibilities: Assign tasks for each role.

Built With

• Nuxt 3
• Pinia
• Tailwind CSS
• Lucide Vue Next

Getting Started

Follow these steps to set up the project locally:

Prerequisites

Ensure you have Node.js (version 22 or higher) installed on your machine.

Setup

1. Clone the repository:

   git clone https://github.com/m-spangenberg/ogram.git
   cd ogram

2. Install dependencies:

   npm install

3. Launch the development server:

   npm run dev

Open http://localhost:3000 in your browser to start using OGRAM.

Build

To create a production build, run:

npm run build

To preview the production build locally, use:

npm run preview

To generate a static site (SSG), run:

npm run generate

Usage

Building Your Org Chart

• Add Roles: Use the sidebar to create new roles. Drag them from the "Roles" list onto the board.
• Connect Roles: Hover over a node and drag from the blue handles to create relationships between roles.
• Add Locations: Define locations in the sidebar. Drag them onto the board to visually group roles.
• Bulk Operations: Shift + Click and drag to select multiple nodes. Use the floating toolbar to bulk-delete or bulk-move roles to a specific location.

Customizing Roles

• Assign Members: Click a role node to open the Role Details sidebar. Select from the "Members" dropdown to assign people.
• Responsibilities: Add/remove specific responsibilities within the Role Details sidebar.
• Coordinates: Fine-tune specific location coordinates for nodes if necessary.

Visual Export

• Auto-Layout: Click the Auto Layout button in the header to automatically organize messy charts using the Dagre algorithm.
• Download PNG: Export your current view as a high-quality PNG image.
• Export JSON: Save your data to a local JSON file to back up or share your chart.

Customization

• Dark Mode: Switch between Light and Dark mode using the toggle in the header. OGRAM respects your system preferences by default.