# Introduction

![](https://raw.githubusercontent.com/liamross/psiagram/master/logo/logo-title.png)

Psiagram ([/ˈ(p)saɪɑˌɡræm/](http://ipa-reader.xyz/?text=%CB%88\(p\)sa%C9%AA%C9%91%CB%8C%C9%A1r%C3%A6m)) - a simple, feature-rich, and extensible diagram framework for JavaScript. It provides the foundation to build anything from simple workflows to complex interactive graphs with vast shape libraries.

[CodeSandbox Demo](https://codesandbox.io/s/qzwk05zx4j)

## Simple

**Psiagram is a dependency-free framework**, allowing easy integration in any front end, regardless of the technology stack. It wraps all complex DOM manipulation, which makes manipulating your diagrams as easy as setting properties.

To start creating using Psiagram, see the [basics section](https://www.psiagram.org/basics).

## Feature-rich

Psiagram provides robust events for every action to allow total control over the framework, enabling you to intercept and alter any updates to the Paper. At its core, it provides **high-performance rendering** of SVG diagram components, and an extensive but simple API to interact with the diagram.

For an in-depth look into some features, see the [in-depth section](https://www.psiagram.org/in-depth).

## Extensible

Psiagram is set up to allow **easy extensibility through plugins**. These vary from providing a grid pattern background, to providing complex drag-n-drop functionality and event firing.

Check out some of the official plugins in the [plugins section](https://www.psiagram.org/plugins).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://www.psiagram.org/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.