Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Empty diagram generation. #724

Open
arthurbrenno opened this issue Aug 8, 2024 · 3 comments
Open

Empty diagram generation. #724

arthurbrenno opened this issue Aug 8, 2024 · 3 comments

Comments

@arthurbrenno
Copy link

Describe the bug
I'm trying to generate a mermaid diagram from an ouput. The output generates valid mermaid diagram in mermaid.live, but the generated output using the cli just gives me a diagram with no text.

To Reproduce
Execute this function:

def mermaid_to_base64(
    mermaid_string: str,
    width: int = 2048,
    height: int = 2048,
    scale: float = 3.0,
    background_color: str = "transparent",
) -> str:
    def preprocess_mermaid_string(mermaid_string: str) -> str:
        """
        Preprocesses the Mermaid string to handle quote escaping and remove accents.
        """
        try:
            data = json.loads(mermaid_string)
            mermaid_string = data
        except json.JSONDecodeError:
            pass

        mermaid_string = mermaid_string.replace('\\"', '"')

        # Remove accents
        mermaid_string = "".join(
            c
            for c in unicodedata.normalize("NFD", mermaid_string)
            if unicodedata.category(c) != "Mn"
        )

        return mermaid_string

    logger.debug("Original mermaid string: %s", mermaid_string)
    mermaid_string = preprocess_mermaid_string(mermaid_string)
    logger.debug("Preprocessed mermaid string: %s", mermaid_string)

    # Create temporary files for input and output
    with tempfile.NamedTemporaryFile(
        mode="w", suffix=".mmd", delete=False
    ) as input_file, tempfile.NamedTemporaryFile(
        mode="wb", suffix=".png", delete=False
    ) as output_file:
        # Write the Mermaid string to the input file
        input_file.write(mermaid_string)
        input_file.flush()

        # Close the files to ensure all data is written
        input_file.close()
        output_file.close()

        try:
            # Run mmdc (Mermaid CLI) command with additional parameters
            subprocess.run(
                [
                    "mmdc",
                    "-i",
                    input_file.name,
                    "-o",
                    output_file.name,
                    "-b",
                    background_color,
                    "-w",
                    str(width),
                    "-H",
                    str(height),
                    "-s",
                    str(scale),
                ],
                check=True,
                capture_output=True,
                text=True,
            )

            # Read the output PNG file and encode it to base64
            with open(output_file.name, "rb") as f:
                image_data = f.read()
                base64_encoded = base64.b64encode(image_data).decode("utf-8")

            return base64_encoded

        except subprocess.CalledProcessError as e:
            logger.error(f"Error running Mermaid CLI: {e.stderr}")
            raise
        finally:
            # Clean up temporary files
            os.unlink(input_file.name)
            os.unlink(output_file.name)

    return ""

Expected behavior
To generate a mermaid diagram with the original text in it.

Screenshots
any diagram will look like this:
image

I'm using mmdc 10.3.1, NixOS (Google IDX) with pkgs.mermaid-cli.

Additional context
Add any other context about the problem here.

@Mo-way
Copy link

Mo-way commented Aug 12, 2024

I think this is a duplicate of: #691

TLDR:

It looks like this is an issue with mermaid-cli after all:
[Mermaid's] SVG uses foreignObject to embed HTML text. Supporting this would basically involve having a whole HTML renderer inside librsvg. Please tell mermaid-cli to use SVG text elements instead.

@pbittencourt
Copy link

Sorry, I still don't understand, @Mo-way. Is this a solution?

Please tell mermaid-cli to use SVG text elements instead.

In this case, how can I instruct mermaid-cli to do this?

@aloisklink
Copy link
Member

Hi @pbittencourt, you might have some luck by following mermaid-js/mermaid#2688 (comment)

Some diagrams have a htmlLabels: false config setting that you can pass that might stop them from using <foreignObject>/embedded HTML.

However, even if you do do this, some Mermaid diagrams still use CSS which is valid in the SVG 2.0, but isn't valid in SVG 1.1 that many libraries like librsvg (see mermaid-js/mermaid#2102)

As a work-around, you could try asking mermaid-cli to make a PDF file, then using a tool like pdf2svg to create an SVG file from that PDF: mermaid-js/mermaid#2102 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants