From e4129025b04d6994a8cce8cd90e6203eb3af535d Mon Sep 17 00:00:00 2001 From: shenchucheng Date: Fri, 24 May 2024 15:59:04 +0800 Subject: [PATCH] fix pyppeteer/playwright mermaid engine run error --- metagpt/utils/mmdc_playwright.py | 42 ++++++++++++++--------------- metagpt/utils/mmdc_pyppeteer.py | 40 +++++++++++++-------------- tests/metagpt/utils/test_mermaid.py | 2 +- 3 files changed, 42 insertions(+), 42 deletions(-) diff --git a/metagpt/utils/mmdc_playwright.py b/metagpt/utils/mmdc_playwright.py index 5d455e1c5..e7e6e3b2e 100644 --- a/metagpt/utils/mmdc_playwright.py +++ b/metagpt/utils/mmdc_playwright.py @@ -53,30 +53,30 @@ async def mermaid_to_file(mermaid_code, output_file_without_suffix, width=2048, await page.wait_for_load_state("networkidle") await page.wait_for_selector("div#container", state="attached") - # mermaid_config = {} + mermaid_config = {} background_color = "#ffffff" - # my_css = "" + my_css = "" await page.evaluate(f'document.body.style.background = "{background_color}";') - # metadata = await page.evaluate( - # """async ([definition, mermaidConfig, myCSS, backgroundColor]) => { - # const { mermaid, zenuml } = globalThis; - # await mermaid.registerExternalDiagrams([zenuml]); - # mermaid.initialize({ startOnLoad: false, ...mermaidConfig }); - # const { svg } = await mermaid.render('my-svg', definition, document.getElementById('container')); - # document.getElementById('container').innerHTML = svg; - # const svgElement = document.querySelector('svg'); - # svgElement.style.backgroundColor = backgroundColor; - # - # if (myCSS) { - # const style = document.createElementNS('http://www.w3.org/2000/svg', 'style'); - # style.appendChild(document.createTextNode(myCSS)); - # svgElement.appendChild(style); - # } - # - # }""", - # [mermaid_code, mermaid_config, my_css, background_color], - # ) + await page.evaluate( + """async ([definition, mermaidConfig, myCSS, backgroundColor]) => { + const { mermaid, zenuml } = globalThis; + await mermaid.registerExternalDiagrams([zenuml]); + mermaid.initialize({ startOnLoad: false, ...mermaidConfig }); + const { svg } = await mermaid.render('my-svg', definition, document.getElementById('container')); + document.getElementById('container').innerHTML = svg; + const svgElement = document.querySelector('svg'); + svgElement.style.backgroundColor = backgroundColor; + + if (myCSS) { + const style = document.createElementNS('http://www.w3.org/2000/svg', 'style'); + style.appendChild(document.createTextNode(myCSS)); + svgElement.appendChild(style); + } + + }""", + [mermaid_code, mermaid_config, my_css, background_color], + ) if "svg" in suffixes: svg_xml = await page.evaluate( diff --git a/metagpt/utils/mmdc_pyppeteer.py b/metagpt/utils/mmdc_pyppeteer.py index f029325f1..f53fa2837 100644 --- a/metagpt/utils/mmdc_pyppeteer.py +++ b/metagpt/utils/mmdc_pyppeteer.py @@ -55,29 +55,29 @@ async def mermaid_to_file(mermaid_code, output_file_without_suffix, width=2048, await page.goto(mermaid_html_url) await page.querySelector("div#container") - # mermaid_config = {} + mermaid_config = {} background_color = "#ffffff" - # my_css = "" + my_css = "" await page.evaluate(f'document.body.style.background = "{background_color}";') - # metadata = await page.evaluate( - # """async ([definition, mermaidConfig, myCSS, backgroundColor]) => { - # const { mermaid, zenuml } = globalThis; - # await mermaid.registerExternalDiagrams([zenuml]); - # mermaid.initialize({ startOnLoad: false, ...mermaidConfig }); - # const { svg } = await mermaid.render('my-svg', definition, document.getElementById('container')); - # document.getElementById('container').innerHTML = svg; - # const svgElement = document.querySelector('svg'); - # svgElement.style.backgroundColor = backgroundColor; - # - # if (myCSS) { - # const style = document.createElementNS('http://www.w3.org/2000/svg', 'style'); - # style.appendChild(document.createTextNode(myCSS)); - # svgElement.appendChild(style); - # } - # }""", - # [mermaid_code, mermaid_config, my_css, background_color], - # ) + await page.evaluate( + """async ([definition, mermaidConfig, myCSS, backgroundColor]) => { + const { mermaid, zenuml } = globalThis; + await mermaid.registerExternalDiagrams([zenuml]); + mermaid.initialize({ startOnLoad: false, ...mermaidConfig }); + const { svg } = await mermaid.render('my-svg', definition, document.getElementById('container')); + document.getElementById('container').innerHTML = svg; + const svgElement = document.querySelector('svg'); + svgElement.style.backgroundColor = backgroundColor; + + if (myCSS) { + const style = document.createElementNS('http://www.w3.org/2000/svg', 'style'); + style.appendChild(document.createTextNode(myCSS)); + svgElement.appendChild(style); + } + }""", + [mermaid_code, mermaid_config, my_css, background_color], + ) if "svg" in suffixes: svg_xml = await page.evaluate( diff --git a/tests/metagpt/utils/test_mermaid.py b/tests/metagpt/utils/test_mermaid.py index 7367463dc..085c5cf02 100644 --- a/tests/metagpt/utils/test_mermaid.py +++ b/tests/metagpt/utils/test_mermaid.py @@ -13,7 +13,7 @@ from metagpt.utils.mermaid import MMC1, mermaid_to_file @pytest.mark.asyncio -@pytest.mark.parametrize("engine", ["nodejs", "ink"]) # TODO: playwright and pyppeteer +@pytest.mark.parametrize("engine", ["nodejs", "ink", "playwright", "pyppeteer"]) async def test_mermaid(engine, context, mermaid_mocker): # nodejs prerequisites: npm install -g @mermaid-js/mermaid-cli # ink prerequisites: connected to internet