Nodes/ComfyUI_MarkdownImage/Create Dialog Image
ComfyUI Node

Create Dialog Image

CreateDialogImage

By dasilva333·Created 2 years ago·Updated about a year ago· 0
Create Dialog Image
  • background_image
  • IMAGE
label_contentDr. Aeda
label_enabledtrue
label_positionright
label_font_size28
label_font_color#C71585
label_width180
dialog_contentThe quick brown fox jumped over the lazy dogs. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
dialog_bkg_colorrgba(255, 105, 180, 0.5)
dialog_font_colorwhite
dialog_font_size26
dialog_border_colorwhite
dialog_border_width6
dialog_positionbottom
dialog_alignmentcenter
dialog_optimizetrue
font_familySegoe UI Emoji
image_width840
image_height210

Ever generated a beautiful visual-novel-style background and thought "this needs a speech bubble situation"? That's this node. CreateDialogImage (from the dasilva333/ComfyUI_MarkdownImage pack) renders a comic/visual-novel style dialog box - rounded corners, border, an optional name-label pill ("Dr. Aeda") - and composites it onto a background image you feed in. It's the V1 implementation, which means it renders through imgkit/wkhtmltoimage like the pack's other original node, and it carries the same dependency caveat: that's a system binary, not a pip package, and the code expects it at a hardcoded Windows path.

The pipeline it slots into is the boring-but-useful end of a workflow: generate a scene → decode to an image → stick the dialogue box on it → save or animate. You're not doing anything clever with the diffusion graph here; you're adding text like a caption layer, and this node is purpose-built for the "name tag + message" look that comic and game scripts use.

How it works

The node renders the label and dialog box as styled HTML, converts your dialog_content Markdown, and screenshots it as a transparent PNG via wkhtmltoimage (the transparent option does the work, so the box floats over whatever's behind it). That transparent box is then pasted onto your background_image with PIL, using its alpha channel. Positioning is relative to the background's dimensions: dialog_position puts the box on the top or bottom edge, dialog_alignment handles left/center/right. With dialog_optimize on, it trims the empty space below the text so a bottom-positioned box hugs the dialogue instead of leaving a dead gap.

The inputs that matter

There are nineteen inputs, all required, but the handful you'll actually touch:

  • background_image - the scene you're overlaying onto. It's a required IMAGE input, so this node cannot run standalone in the graph; wire a VAE-decoded image in first. That trips people up because the dialog box looks self-contained.
  • dialog_content - the words, multiline, Markdown-aware.
  • label_content / label_enabled - the name pill ("Dr. Aeda"). Turn label_enabled off for a plain box.
  • dialog_bkg_color - note the default is rgba(255, 105, 180, 0.5): RGBA with alpha. That's how you get a translucent box. If you want solid, use a plain color.
  • dialog_position (top/bottom) and dialog_alignment (left/center/right) - where the box sits on the background.
  • image_width / image_height - not the output size but the footprint of the dialog box itself (defaults 840×210). Your background should be larger than this; that's what makes positioning meaningful.

The rest - font family, sizes, colors, border width, label position (left/right) and label width - are the styling knobs. dialog_optimize is a boolean that's worth leaving on.

Output is a single IMAGE: the background with the dialog composited in. Straight into SaveImage, or into a VHS node if this is a frame of something bigger.

Installing

ComfyUI Manager: search ComfyUI_MarkdownImage. Manual route:

cd ComfyUI/custom_nodes
git clone https://github.com/dasilva333/ComfyUI_MarkdownImage

Restart, and you're 90% done - the pack has no models to download. The remaining 10% is wkhtmltopdf (download from https://wkhtmltopdf.org/downloads.html), because dialog_generator.py hardcodes C:\Program Files\wkhtmltopdf\bin\wkhtmltoimage.exe. On a default Windows install it just works; on Linux/Mac you must edit that path in the pack's source. If that sounds like a hassle and you have Chrome installed, the V2 sibling (CreateDialogImageV2) does the same job via Selenium with no wkhtmltopdf.

Troubleshooting

  • imgkit error on first run - the hardcoded wkhtmltoimage path again. Edit dialog_generator.py.
  • Box renders but the scene doesn't show behind it - you fed an opaque dialog_bkg_color; go back to an rgba(...) value for translucency.
  • Box sits in a weird place or goes off-canvas - your image_width/image_height is larger than the background, or you're compositing onto a background with different proportions than the dialog canvas assumed. Keep the dialog footprint comfortably smaller than the scene.

It's a niche tool in a niche pack, so don't expect a community troubleshooting thread to exist for it - but the failure modes are all ordinary dependency/path issues, which are fixable in minutes.

Categorytext

Inputs (19)

NameTypeDefaultDescription
label_contentSTRINGDr. Aeda
label_enabledCOMBOtrue2 options: true, false
label_positionCOMBOright2 options: left, right
label_font_sizeINT288–64
label_font_colorSTRING#C71585
label_widthINT18050–4096
dialog_contentSTRINGThe quick brown fox jumped over the lazy dogs. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
dialog_bkg_colorSTRINGrgba(255, 105, 180, 0.5)
dialog_font_colorSTRINGwhite
dialog_font_sizeINT268–64
dialog_border_colorSTRINGwhite
dialog_border_widthINT61–20
dialog_positionCOMBObottom2 options: top, bottom
dialog_alignmentCOMBOcenter3 options: left, center, right
dialog_optimizeCOMBOtrue2 options: true, false
font_familySTRINGSegoe UI Emoji
image_widthINT84016–4096
image_heightINT21016–4096
background_imageIMAGE

Outputs (1)

NameTypeDescription
IMAGEIMAGE