Desktop: mermaid image nodes render without the image

Aperta Adatta ai principianti
  • Qualcosa non va?
#62,893 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
77/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
desktop

Direzione di ricerca

Inizia da packages/session-ui/src/components/markdown-mermaid.ts ed esamina le opzioni di Pele renderAsync, in particolare images: false. Verifica come vengono visualizzati i nodi immagine di Mermaid nel riquadro Desktop Review e se abilitare il rendering delle immagini preserva il comportamento Markdown esistente. Il lavoro è completato quando i nodi immagine del diagramma di flusso mostrano le immagini invece di lasciare spazi vuoti.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

reproduced
Description

Mermaid image nodes (node@{ img: "..." }) show only their label in the Markdown viewer. The image is missing. Normal Markdown images in the same file (![x](assets/x.png)) display correctly.

The cause seems to be ./packages/session-ui/src/components/markdown-mermaid.ts, which calls Pele with images: false:

const result = await pele.renderAsync(source, {
  ...
  images: false,
})

With this option, Pele leaves the <image> element out of the SVG but still reserves the space for it, so the node shows only its label above an empty gap.

Plugins

No response

OpenCode version

2.2.6

Steps to reproduce
  1. Create a markdown file with: 
    ![image](assets/image.png)

```mermaid
flowchart TB
  a["start"]
  b@{ img: "assets/image.png", label: "image node", pos: "b", w: 90, h: 53, constraint: "on" }
  c@{ img: "https://mermaid.js.org/favicon.svg", label: "remote image", pos: "b", w: 60, h: 60 }
  a --> b --> c
```
  2. Open the file in the desktop Review pane.
  3. The Markdown image shows, but nodes b and c show only their labels with empty space.
Screenshot

No response

Operating System

Mac OS

Terminal

No response

Lingua principale
TypeScript
Stelle
225k
Fork
30.4k
Merge medio
4h 7m
PR unite (30g)
554

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di anomalyco/opencode

Tutte le issue di anomalyco/opencode

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.