Open Source TypeScript Diagram Software

Project Graph is a free, open-source visual knowledge organization application designed for brainstorming, note-taking, and project planning. It provides an infinite canvas where users can create interconnected nodes to represent ideas, relationships, and complex information. The application supports text, images, mathematical formulas, quotations, audio, and video. Users can organize information through nested groups, directional connections, tree structures, and automatic layouts. Keyboard-driven node creation and customizable shortcuts simplify rapid idea development. Project Graph also provides autosaving, backups, undo and redo operations, and data importing and exporting. Built with React, TypeScript, and Tauri, it supports JavaScript extensions for customizing workflows, interfaces, and node functionality.

Nx builds a project graph by analyzing your workspace, which it then uses to only rebuild what is necessary and to never run the same computation twice. Nx also helps establish structured code sharing and ownership management to keep the workspace maintainable. Nx provides a modern integrated dev experience. It has a high-quality VS Code plugin, interactive visualizations, GitHub integration and more. The core of Nx is generic, simple, and unobtrusive. Nx Plugins are completely optional, but they can really level up your productivity. Whether you have one project or one thousand, Nx will keep your CI fast and your workspace maintainable. Nx is smart. It analyzes your workspace and figures out what can be affected by every code change. That's why Nx doesn't rebuild and retest everything on every commit, it only rebuilds what is necessary. Nx comes with an interactive dependency diagram to help explore and understand your workspace.

A flow & process orientated diagramming library inspired by Blender, Labview and Unreal engine. Modern Codebase written entirely in Typescript and React, the library makes use of powerful generics, advanced software engineering principles and is broken up into multiple modules. Hackable and extensible the entire library including its core can be extended, rewired and re-assembled into fundamentally different software to suit your own software needs. HTML nodes as a first-class citizen the library was originally written to represent advanced dynamic nodes, that are difficult to represent as SVG's due to complex input requirements ux requirements. Designed for process the library is aimed for software engineers that want to rewire their programs at runtime, and that want to make their software more dynamic. Fast diagram editing the defaults provided give the highest priority to editing diagrams as fast as possible.

LogicFlow is a flowchart editing framework that provides a series of functions necessary for flowchart interaction and editing, as well as simple and flexible node customization, plug-in and other expansion mechanisms, so that we can quickly meet the needs of class flowcharts in business systems. Compatible with the process editing requirements of various product customizations, most modules are implemented in the form of plug-ins, and each module is supported to be plugged and unplugged freely. Flowcharts can fully express business logic without being limited by process engines. A framework focused on business process flow editing.

TikZ Editor is a free, open-source visual editor for creating and modifying TikZ diagrams used in LaTeX documents. It combines a graphical drawing canvas with a live TikZ source code editor. Users can create shapes, paths, curves, trees, and mathematical illustrations without manually positioning every element in code. Changes made visually are reflected immediately in the source while preserving existing formatting. The editor supports advanced TikZ constructs, including matrices, Bézier curves, and foreach loops. Existing LaTeX documents can be opened to modify embedded diagrams. Import options include SVG, IPE, and PowerPoint files. Diagrams can be exported to SVG, PDF, or PNG. The desktop edition also includes an AI assistant and native file integration.

ReacType is a rapid prototyping tool built on Electron that allows users visualize their application architecture dynamically, employing a drag-and-drop canvas display and an interactive, real-time component code preview that can be exported as a React app for developers employing React component architecture alongside the comprehensive type-checking of TypeScript. In other words, you can draw prototypes and export React / TypeScript code! After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet. If you are given a warning that Apple could not scan the app. Users can now manage state dynamically within nested components using React Hooks within the state manager tab. For a selected component, users can see a list of available props from the parent, add props, and delete props in case they are not required later on.

Provides easy-to-use node customization capabilities and out-of-the-box interactive components, allowing us to quickly build flowcharts, DAG diagrams, ER diagrams and other graph applications. Extremely easy to customize: support custom node styles and interactions using SVG/HTML/React/Vue/Angular. Out of the box: built-in 10+ image editing supporting extensions, such as frame selection, alignment line, small map, etc. A complete event system that can listen to any event that occurs in the chart.

This is nomnoml, a tool for drawing UML diagrams based on a simple syntax. It tries to keep its syntax visually as close as possible to the generated UML diagram without resorting to ASCII drawings. The nomnoml javascript library can render diagrams on your web page. The only dependency is graphite. Install nomnoml using either npm or good old script inclusion. In the SVG output the node name is attached to SVG shapes and g containers with data-name attribute. You can use this to implement interactive diagrams.