Loading...

Open Source Library to Create 2D/3D Diagrams in Blazor.

Stephen R. Strong

Working to create a complete C# / Blazor diagraming experience for developers.

The Blazor demo built for NDC Oslo 2023 is now available as a NuGet package. The library includes .NET 8 and Blazor features. There are new 2D shapes, layout algorithms with glued connections, scaled multi-page diagrams and better 2D/3D integration. The features of Visio, Three.js and CesiumJS are now available in Blazor, both client and server.

Fork on GitHub NDC Oslo Talk: Reinventing Visio on YouTube

2D Diagrams

Create Multi-page scaled drawing using SVG or HTML5 Canvas.

3D Worlds

Render to scale 3D primitives or animated GLB files

Real Time Collaberation

SignalR integration lets you share and draw on the same canvas together.

Architecture

Three integrated projects to deliver a collaborative 2D/3D Web solution. Event driven commanding enabling collaboration

Foundry Rules And Units

C# classes to manage engineering units

Rule system to syncronize values across the domain model

Blazor Threejs

C# Wrapper around the THree.js Library

3D primitives, import GLBs, animation, clone rendering

Foundry Blazor 2D Shape Model

Visio Inspired Shape Sheet model with supporting C# classes

SVG and Html5 canvas rendering model

NDC Olso 2023 was our MVP

Testing is agile, we build features only if they are visually testable

Multi-user Collaberation Feature

Design a message passing protocol

Create scenarios to verify the design

Visio

all C# classes / properties follow visio inspired object model.

Model with objects like drawings, pages, shapes, glue and connection points.

Extend render methods for every C# class

Smart value recalculation between shapes

Animation build into render cycle

3D

this is focused on business need not gaming

C# model that wraps Three.js (WebGL) library with extensive documentation

Select from a wide range of primitives

Import GLB files including animations

Integrated to 2D objects

Team up

pass 'chat' messages about geometry and drawing commands

Integrated SignalR server to connect Multi-user on request

Stream data from other users

Collaborate in 2D or 3D

Work different sections of the same document

Layout

build in services to execute tree and network layout

Control each layer of the tree layout with with it one strategy

Show / Hide subtrees with a mouse click

Add animations during layout

Keep your model data seperate from shapes

Glue

reduces your drawing efforts

Connect 1D,2D, and 3D shapes with glue to preserve semantic information

Connect to shape centers or edges

Glue 2D shapes together with a simple formula

Transfer glue to 3D representations

Menus

create menu structures using your own commands

Define a dictionary of Actions, that automate Foundry API's

Build a custom workbook to hold your commands

Render the menus using standard HTML controls

Opt-in to rendering you menus at 2D shapes or button clicks

Get In Touch

Clone the Repo to get Started. /github.com/ApprenticeFoundry

Clone the Repo to get Started. Watch 60 min NDC talk on YouTube

Questions? Need help? Contact Me.

stephen.strongiot@gmail.com