I see the old ticket which you closed but when i put fontawesome in a diagram it shows in the preview, but not once i put it in the real doc.

The font awesome mermaid feature doesn't seem to work.
Maybe this is just due to the version of mermaid used?

If the diagram is fairly not that small, the insert button is hidden below the SVG. Probably some z-index and overflow: scroll styling would fix the issue. Let me know if you need any help!

Update: Expanding the textarea helps in showing the button.

When I try inserting a new diagram, I get the following error:

ScriptError: Authorization is required to perform that action.

great add-on!

could you update to latest mermaid version?

thanks

Currently, only working in Docs.
Would it be possible to add support so the Add-On works in Slides as well?

Great add-on BTW.

In our organization we standardized on writing C4 diagrams for context.
We were searching a way to add diagrams to gdocs and found this application that seem very promising since mermaid can handle C4 diagrams (beta feature, but still better than nothing) see: https://mermaid.js.org/syntax/c4c.html

It would be great to add support for C4 diagrams, from what I understand it should be a tiny modification to this test https://github.com/renanlecaro/mermaid-gdocs/blob/master/src/index.js#L119

Thank you so much for a super awesome plugin. I use it almost every day!

I'm so sad that it has stopped working. I get the following error:
This document requires 'TrustedHTML' assignment.
I0 @ mermaid-d06ecb0d.js:5603

I hope you can fix it. Thanks again!

When mermaid fails to understand the text input from the user, we just add a red border for now. It would be nice to give more details

Hi,

i like your plugin very much, as it helps collaboration on a chart.
Unfortunately it does not work in in my Chrome Browser (Version 119.0.6045.199 on OSX)
Works fine in Safari.
On Chrome it does not render the graph. In the graph area the source code is shown.
Let me know whether and what further information you need to track this down.

TIA tom

First thanks for your work @renanlecaro 👏 This extension is really helpful.

It could be a cool idea to add autocompletion on top of the cursor for the mermaid nodes:

%% Here the nodes are Page and Section
graph TB
    Page["⚛️Page"]
    Section["⚛️Section"]

So when you start writing Sec... it will propose you Section. Then as a user I don't need to rewrite it or copy-paste it 👍

I installed from Google Marketplace. Mermaid appears under the Add-ons, and I am able to choose chart types to insert. When I fill anything in to make a chart, I get nothing on the right side of the dialog, even when I'm sure it's good mermaid code.
I also checked in Incognito, in case another extension was interfering, but it acts the same there. Also tried in a brand new document.
Chrome is 95.0.4638.69

No reason not to have it

Centering the diagram to the middle just looks nicer imo :)

Currently:

Suggested:

Thanks for this great tool!

Would be great to add support for customising the configuration object

Gantt chart is showing only in too small width.

Can we have a reduced scope of permissions?

Currently, this is what's requested:

• See, edit, create, and delete all your Google Docs documents

I also have the PlantUML Gizmo add-on, and it requests for a smaller scope:

• View and manage documents that this application has been installed in

I think that's a better scope to request for, and it gives us better peace of mind. The current permission is preventing me from using the add-on for work.

Hello,

Mermaid on GDocs works perfectly, except for the Gantt Diagram.
When you insert it the first time, it works fine, but when you try to edit the Gantt Diagram, it says Please selecte an existing chart created with this app first. whereas for others, it can be edited.

Have you had that issue ?
Thank you

Hi,

the chars < and > are somehow special within the google docs environment. The example diagram below will wok fine in the live editor at https://mermaid-js.github.io/mermaid-live-editor/edit , but will add another </john> at the end in google docs.

Depending on the content of the < ... > sequence, the diagram fails to render at all.

sequenceDiagram
    Alice->>+John: Hello <John>, how are you?

Thanks,
Laurent

Here's a diagram that I was trying to render in the docs:

sequenceDiagram
    participant a as Phone
    box Public-Facing API
    participant proxy as Cloud Run
    participant fcm as FCM
    participant fs as Firestore
    end
    box Cloud Node internal services
    participant pubsub as Pub/Sub
    participant b as HTSS
    participant sql as Cloud SQL
    participant redis as Memory Store
    participant kms as Cloud KMS
    participant iam as Cloud IAM
    participant audit as Cloud Audit Log
    end
    a->>a: Start Workload
    a->>proxy: Send Public Key and Device ID
    proxy->>pubsub: Forward Public Key and Device ID
    b->>pubsub: Receive Public Key and Device ID
    b->>fs: Store Node Public Key under Device ID key
    b->>fcm: Send Public Key notification
    fcm->>a: Notify about Node Public Key
    a->>proxy: Init keygen
    proxy->>pubsub: Forward Keygen init
    b->>pubsub: Receive Keygen init
    b->>b: Create KeyGen
    b->>redis: Cache KeyGen
    b->>sql: Authenticate
    sql->>iam: Verify token
    alt token OK:
        iam->>sql: OK
    else wrong token:
        break when wrong token:
            iam->>audit: Attestation failed: Wrong Token
        end
	end
    b->>sql: Store KeyGen
    par Between Nodes:
        loop Each node to each other:
            b->>fcm: Ask for a KeyGen
            a->>a: Encrypts a KeyGen using Node Public Key
            a->>proxy: Send encrypted KeyGen
            proxy->>pubsub: Forward encrypted KeyGen
            b->>pubsub: Receive encrypted KeyGen
            b->>b: Decrypt KeyGen
            b->>b: Generate key share
            b->>kms: Encrypt key share
            kms->> iam: Verify token
            alt token OK:
                iam->>kms: OK
            else wrong token:
                break when wrong token:         
                    iam->>audit: Attestation failed: Wrong Token
                end
			end
            b->>fs: Store encrypted key share for Phone
            b->>fcm: Send notification about encrypted key share
            fcm->>a: Notify about key share
            b->>sql: Authenticate
            sql->>iam: Verify token
            alt token OK:
                iam->>sql: OK
            else wrong token:
                break when wrong token:         
                    iam->>audit: Attestation failed: Wrong Token
                end
			end
            b->>sql: Store Encrypted Key Share
            b->>redis: Clear KeyGen
        end
    end

sequenceDiagram
    participant a as Phone
    box Public-Facing API
    participant proxy as Cloud Run
    participant fcm as FCM
    participant fs as Firestore
    end
    box Cloud Node internal services
    participant pubsub as Pub/Sub
    participant b as HTSS
    participant sql as Cloud SQL
    participant redis as Memory Store
    participant kms as Cloud KMS
    participant iam as Cloud IAM
    participant audit as Cloud Audit Log
    end
    a->>a: Start Workload
    a->>proxy: Send Public Key and Device ID
    proxy->>pubsub: Forward Public Key and Device ID
    b->>pubsub: Receive Public Key and Device ID
    b->>fs: Store Node Public Key under Device ID key
    b->>fcm: Send Public Key notification
    fcm->>a: Notify about Node Public Key
    a->>proxy: Init keygen
    proxy->>pubsub: Forward Keygen init
    b->>pubsub: Receive Keygen init
    b->>b: Create KeyGen
    b->>redis: Cache KeyGen
    b->>sql: Authenticate
    sql->>iam: Verify token
    alt token OK:
        iam->>sql: OK
    else wrong token:
        break when wrong token:
            iam->>audit: Attestation failed: Wrong Token
        end
	end
    b->>sql: Store KeyGen
    par Between Nodes:
        loop Each node to each other:
            b->>fcm: Ask for a KeyGen
            a->>a: Encrypts a KeyGen using Node Public Key
            a->>proxy: Send encrypted KeyGen
            proxy->>pubsub: Forward encrypted KeyGen
            b->>pubsub: Receive encrypted KeyGen
            b->>b: Decrypt KeyGen
            b->>b: Generate key share
            b->>kms: Encrypt key share
            kms->> iam: Verify token
            alt token OK:
                iam->>kms: OK
            else wrong token:
                break when wrong token:         
                    iam->>audit: Attestation failed: Wrong Token
                end
			end
            b->>fs: Store encrypted key share for Phone
            b->>fcm: Send notification about encrypted key share
            fcm->>a: Notify about key share
            b->>sql: Authenticate
            sql->>iam: Verify token
            alt token OK:
                iam->>sql: OK
            else wrong token:
                break when wrong token:         
                    iam->>audit: Attestation failed: Wrong Token
                end
			end
            b->>sql: Store Encrypted Key Share
            b->>redis: Clear KeyGen
        end
    end

As you can see, GH as well as mermaid.js live editor are able to render it without a glitch. Any help is appreciated.

I assume this may be smth just related to the size of the diagram.

The all sequence diagram is duplicated no matter what I use.
For example:
A->>B

Will show it twice

The plantuml gizmo addon offers editing via a sidebar and it's awesome. But having a larger window for bigger graphs is also quite useful.

I've found myself occasionally editing small things in the text area.
With the importance of indentation for mermaid js, the tab key usage would be nice, but since it's a form it just navigates to the next element.
This will break the form navigation though, so maybe an alternative keybinding?

After activation I see only help in addons.

The plugin was working well but now has stopped functioning. The only thing I know of that changed was upgrading to the latest version of Chrome.

The symptom is that the extension UI loads but is non-functional. A series of error messages are logged to the browser console each time the extension UI is launched. (See attached)

Chrome version: Version 111.0.5563.146 (Official Build) (arm64)
OS: macOS Ventura 13.3

mermaid-plugin-errors.log

Trying to edit a flowchart that I created in Google Docs using the Mermaid Add On.
After several rounds of edits, it no longer recognized the chart as one created in mermaid, and I get the following pop-up error:

"Please select an existing chart created with this app first."

Seems to have happened afer I resized and poisitioned it within the document.
Any suggestions? I exited out, and relaunched the google doc, but still happening.

TIA.

Hello,

Great plugin!

When I update a diagram, the diagram 'forgets' its size (of the inserted image). Is it possible to edit a diagram while maintaining the size. I.e.,

• edit diagram
• reize the resulting picture
• edit diagram + save
• picture is back to previous size.

Can that be changed?

First, thank you so much for writing this. I love mermaid and am beyond excited to see your add-on support these right inside google docs.

In any case, on my initial testing, I noticed the following diagram throws an error in the editor:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    rect rgb(216, 241, 251)
      opt Extra response
        Bob->>Alice: Thanks for asking
      end
    end

Whereas, if you remove the rect block, it works fine:

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    end

Background Highlighting (rect) I believe is a recent addition to the Mermaid sequence diagram specification.

See https://mermaidjs.github.io/#/sequenceDiagram?id=background-highlighting

PR #3 addresses the issue here as well as a few other minor changes.

Thanks for the great add-in. Would it be possible to add support for state diagrams?

https://mermaid-js.github.io/mermaid/#/stateDiagram

That's because the picture becomes a different class of document element.

Hi,
Every time I try to insert a graph a message popups stating I don't have permission to do the action.

Regards,
Nuno

I have an existing document with some diagrams (all sequence diagrams). They render fine.

However, when I try to create a new diagram or update an existing one, there's an issue. When updating, I'm able to make a change to the diagram via Edit selected chart and have it reflected, but when I click Update, I see this error message:

ScriptError: We're sorry, a server error occurred. Please wait a bit and try again.

I see a similar error message when creating a new diagram and clicking Insert with the default graph diagram code. I saw this error message yesterday and this morning.

I've tried:

• uninstalling and reinstalling the extension
• adding a chart in a new document

When looking at the error console, I don't see anything obvious, but there is a warning message when I first start up the extension: There was an error during the transport or processing of this request. Error code = 404, Path = /wardeninit

When clicking save, I see:

graph LR
  A -->B data:image/png;base64,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
2382548268-warden_bin_i18n_warden.js:107 Net state changed from IDLE to BUSY
2382548268-warden_bin_i18n_warden.js:107 Net state changed from BUSY to IDLE

but no other errors.

I'm using Version 112.0.5615.138 (Official Build) (64-bit) on Windows 10. I tested on Version 112.0.5615.137 (Official Build) (x86_64) on macos (intel) and it works, weirdly enough.