1. Home

Microflow studio

Microflow studio consists of 4 main processes:

1. Your microcontroller -- running a version of Firmata
2. Main process -- for handling all node processes
3. Render process -- for displaying the UI (running React)
4. Temporary node process -- spun up by the main process to either validate the connected board or running the flow logic

C4Context
  Boundary(Microcontroller, "Microcontroller", "microcontroller") {
    System(Hardware, "Hardware", "sensors and actuators")
    System(Firmata, "Firmata", "software")
    BiRel(Hardware, Firmata, "Updates", "firmata-protocol")
  }
  Boundary(MicroflowStudio, "Microflow studio", "electron") {
    System(Temp, "Temp.js", "running your flow")
    BiRel(Temp, Firmata, "Updates", "johnny-five")
    System(Main, "main", "electron main process")
    BiRel(Temp, Main, "Informs", "STDOUT")
    Rel(Temp, Firmata, "Informs", "johnny-five")
    System(Renderer, "renderer", "electron renderer process")
    BiRel(Main, Renderer, "Informs", "IPC")
  }

Loading

Microflow hardware bridge

Microflow hardware bridge consists 3 main processes:

1. The Figma API itself -- functionality exposed by Figma
2. UI -- allowing you to interact with the plugin within Figma
3. Plugin -- running all logic and connection for microflow

C4Context
  Boundary(Figma, "Figma", "microcontroller") {
    System(API, "API", "interacts with Figma")
    BiRel(API, Plugin, "Updates", "figma.ui.onmessage/figma.ui.postMessage")
  }
  Boundary(MicroflowHardwareBridge, "Microflow hardware bridge", "node") {
    System(Plugin, "plugin.ts", "Logic of the plugin")
    System(UI, "main.tsx", "UI of the plugin")
    BiRel(UI, Plugin, "Updates", "postMessage/addEventListener")
  }

Loading