Short URLs from the API with Graphviz

1

Hi Team,

Does Graphviz have a short url feature like the normal quickchart API?

For example, You can do a post request to

image
image860×218 38.4 KB

Any help returning temporary short URLs for the graphviz endpoint would be much appreciated :grinning:

PS: Sorry for the image instead of text. The URLs are important to communicating my question but I get an error when I try to make a post with quickchart URLs. I have emailed support in regards to this issue on their forums

2

Hi @Logan, unfortunately we don’t support short URLs for the graphviz endpoint at this time!

3

Hi Ian,

Thanks for the quick response.

No problem. With that in mind, I found a javascript way to create a temporary URL in the calling program.
Here is my workaround code in case anyone needs it in the future.

      // END USING POST REQUEST
      // FYI: "It can take a couple seconds for short URLs to become active globally.
      console.log("Request string too long. Making a POST request. (This may take longer)")
      const postRequestBody = {
          "graph": diagramTextStr,
          "layout": diagramLayoutEngine,
          "format": "svg", // Temporary storage (below) is expecting SVG format.
      };

      let response = await context.fetcher.fetch({
        disableAuthentication: true,
        url:      "https://quickchart.io/graphviz",    // The Graphviz endpoint cannot return a shortURL
        isBinaryResponse: true,                        // Since cannot get short URL. Get Binary SVG file instead
        method:   "POST",
        headers:  { 'Content-Type': 'application/json' },
        body:     JSON.stringify(postRequestBody), 
      });
      console.log("responseJSON: " + JSON.stringify(response));

      let svgAsBinaryResponse = response.body;
      let temporaryImageUrl = await context.temporaryBlobStorage.storeBlob(svgAsBinaryResponse, "image/svg+xml");
      return temporaryImageUrl;
    }
4

Thanks Logan! Iam using PowerApps as a playform so I can not use your code, but by problem is that the common. However, I have a problem the input format to graphviz not being in json format.

How did you come pass that?

5

Hi Espen,

The JSON format was a little tricky to understand but here is a step by step example. At the end I will tie it all together so you can copy and paste a POST request for your own testing.

Understanding 1: The diagram is not a JSON object. It is a string just like any other GraphViz diagram.
In this case, we will use the following example diagram string:

"digraph {a->b}"

Understanding 2: This diagram string must be in a JSON object with the following format:

      {
          "graph": "digraph {a->b}",
          "layout": "dot",
          "format": "svg",
      }

Understanding 3: This JSON object must then be converted back to a string (Because that is what is required in the request body.

      JSON.stringify(
        {
          "graph": "digraph {a->b}",
          "layout": "dot",
          "format": "SVG",
        }
      )

Understanding 4: Finally this stringified JSON needs to be in the body of a POST Request

let response = await context.fetcher.fetch({
  disableAuthentication: true,
  url:      "https://quickchart.io/graphviz",
  isBinaryResponse: true,
  method:   "POST",
  headers:  { 'Content-Type': 'application/json' },
  body:     
      JSON.stringify(
      {
          "graph": "digraph {a->b}",
          "layout": "dot",
          "format": "svg",
      }
      ), 
});

Have a go and see if that last section of code works for you when copied and pasted.
If it does work, then replace the “digraph {a->b}” with your diagram.

Let me know how you go.