feakin / feakin-web

Feakin 是一个架构设计与可视化协作工具。Feakin is a architecture design and visual collaboration tool.

Feakin

Modernize architecture visualization assets management, based on Diagram-as-code, so you can create, share and edit diagram. Support for import Mermaid, PlantUML, Excalidraw, Dot and more.

Chinese introduction: Feakin 是一个架构资产可视化管理工具。基于图表即代码 的**体系，支持导入 Mermaid, PlantUML, Excalidraw, Dot 等图形资产格式。

Core Technical:

• concepts: Collaboration (CRDT) + DSL (pest.rs) + Graph Engine + Editor Language (Monaco)
• stacks: Rust( + WASM) + React + TypeScript

特性：

• Graph
  • 跨图工具转换。支持导入 Mermaid, PlantUML, Excalidraw, Dot 等图形资产格式，并基于 Graph MIR 进行转换。
  • 广泛的图表格式导出。
    • Drawio
    • Excalidraw
  • 模板创建。支持创建模板，并基于 Graph MIR 进行转换，转换成其它图表格式。
  • 多样化图形布局。支持 Dagre、ELK、Cola 等布局。
  • Dagre
    • replace Grapvhiz to WASM
  • 手绘风格。
    • Rough.js sample
• Collaboration
  • Server
  • Protocol
    • CRDT
  • Editor
• DSL
  • FKL Syntax
  • FKL Parser
  • FKL LSP
• Editor
  • Dot Language
  • Fkl Language

DSL Samples

ContextMap TicketBooking {
  Reservation <-> TicketContext;
}

Context TicketContext {
  Aggregate Ticket, Reservation;
}

Entity Ticket {
  Struct {
    seat: String;
  }
}

// binding;
impl CinemaCreated {
  endpoint {
    GET "/book/{id}";
    authorization: Basic admin admin;
    response: Cinema;
  }

  flow {
    via UserRepository::getUser receive x: User;
    via Kafak send User to "user.create";
  }
}

Demos

Try Online demo: https://online.feakin.com/ Or install @feakin/cli for diagrams converter:

npm install -g @feakin/cli

feakin --input software-development.md.drawio --output sd.excalidraw

Todos

• Render
  • Layout Engine (TODO: split to standalone module)
    • dagre
    • ELK
    • cola.js
  • Canvas
    • Konva.js, react: react-konva
  • Style
    • roughjs: sketchy, hand-drawn-like, style
• Editor
  • text Editor with Monaco Editor
  • interactive Editor with Graphical Editor
• Parser
  • Jison with Mermaid
• collaboration
  • Rope Architecture Model
    • Rope
  • State Management
• CLI
  • upgrade publish script
• Architecture Features
  • Playground: https://online.feakin.com/
  • ComponentLess architecture
    • WebComponent, like <feakin data="" layout="" import="" import-type=""></feakin>
  • Templates
    • DDD ?
    • Layered Architecture
    • Test Pyramid
  • Export and Import
    • MxGraph
    • Excalidraw
    • PlantUML
• Libraries
  • compatible Excalidraw libraries : https://libraries.excalidraw.com/?theme=light&sort=default

Setup

We use nx.js for mono-repo architecture.

1. install

npm install --legacy-peer-deps

Note: nx.js use Craco, which will need --legacy-peer-deps.

2. development exporter, can just run by tests

License

• Flow parser based on mermaid.js
• Excalidraw's type based on excalidraw

@2022 Thoughtworks This code is distributed under the MPL license. See LICENSE in this directory.

feakin-web's Issues

Migration to Turbopack in Future

todos: https://turbo.build/pack/docs

Multiple page import support for Draw.io

Is your feature request related to a problem? Please describe.

In draw.io can have multiple page as follows:

<mxfile host="Electron"  type="device" pages="2">
  <diagram id="8JGP3nOlBgeSVblqOJpB" name="Sample">
    
  </diagram>
  <diagram id="Fkr4O0f3wwbDCb1U1vSy" name="Example">

  </diagram>
</mxfile>

Describe the solution you'd like

support for multiple Graph model

Replace Graphviz from dotparser to WASM

Is your feature request related to a problem? Please describe.
In currently, we we dagre layout and dot-parser for build Graphviz layout.

But in the FKL, we need fdp layout for render relationship between elements, dagre don't support this.

Describe the solution you'd like

replace Graphviz render/parser to WASM Version

• Usage: http://magjac.com/graphviz-visual-editor/
• samples: https://github.com/hpcc-systems/hpcc-js-wasm

Additional context
Add any other context or screenshots about the feature request here.