Convert excalidraw flowchart to mermaid

The following discussion from !109229 (merged) should be addressed:

• @aqualls started a discussion: (+1 comment)

  I needed to listen in on a discussion, so I started working on the various subgraphs. I'm using two-letter combinations for names, instead of starting with A, B, C, etc. to make it easier to tell what subgraph an item belongs to.

  Nowhere near done, but it's a start. I haven't yet found the right character combo that lets me render ( and ) inside an arrow (the text between the pipe | characters), so I've replaced characters I can't yet render with * asterisks:

  Click to expand

  graph LR
  
  subgraph ONE
      AA[diffs/app.vue] --> AB(Virtual scroller enabled?)
      AB -->|yes| AC[Virtual scroller]
      AC --> AD[v-for*diffFiles]
      AB -->|no| AD
      AD --> AE[diffs/diff_file.vue]
      AE --> AF[diffs/diff_content.vue]
      end
  
  subgraph TWO
      AF --> BA[diff_view.vue]
      end 
  
  subgraph THREE
      AF --> CA[diff_viewer.vue]
      CA -->|noPreview?| CB[no_preview.vue]
      CA -->|notDiffable?| CD[not_diffable_viewer.vue]
      CA -->|isRenamed?| CE[viewers/renamed.vue]
      CA -->|isModeChanged?| CF[views/mode_changed.vue]
      CA -->|isImage?| CG[viewers/image_diff_viewer.vue]
      CA -->|if none of above| CH[viewers/download.vue]
  
      CG --> CI(is_replaced?)
      CI --> |no| CJ[image_viewer.vue]
      end 
  
  subgraph FOUR 
      CI -->|yes| DA(select a mode)
      DA -->|mode=twoup, default| DB[two_up_viewer.vue]
      DA -->|mode=swipe| DC[swipe_viewer.vue]
      DA -->|mode=onionskin| DD[onion_skin_viewer.vue]
      DB --> DE[image_diff_overlay.vue]
      DC --> DE 
      DD --> DE
      DE --> DF[v-for*discussions]
      DF --> DG[design_note_pin.vue]
      end
  
  subgraph FIVE
      DB --> EA(render other items)
      EA -->|rendered in<br>note container div| EB[user_avatar_link.vue]
      EA --> EC[diff_discussions.vue]
      EA --> ED[diff_file_drafts.vue]
      end