plant-sample.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "cc855f1a-9eeb-4f2e-a91f-85bf6ba25df3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" contentScriptType=\"application/ecmascript\" contentStyleType=\"text/css\" height=\"571px\" preserveAspectRatio=\"none\" style=\"width:873px;height:571px;background:#000000;\" version=\"1.1\" viewBox=\"0 0 873 571\" width=\"873px\" zoomAndPan=\"magnify\"><defs/><g><rect fill=\"#241418\" height=\"1\" style=\"stroke: #241418; stroke-width: 1.0;\" width=\"1\" x=\"0\" y=\"0\"/><rect fill=\"#33FF02\" height=\"70.9531\" style=\"stroke: #33FF02; stroke-width: 1.0;\" width=\"796\" x=\"5\" y=\"5\"/><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"735\" x=\"6\" y=\"20\">[From https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml (line 301) ]</text><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"780\" x=\"6\" y=\"36.4883\">[From https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml (line 5) ]</text><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"794\" x=\"6\" y=\"52.9766\">[From https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml (line 5) ]</text><text fill=\"#000000\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"156\" x=\"6\" y=\"69.4648\">[From string (line 4) ]</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"0\" x=\"10\" y=\"89.9531\"/><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"74\" x=\"5\" y=\"106.4414\">@startuml</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"742\" x=\"5\" y=\"122.9297\">!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"665\" x=\"5\" y=\"139.418\">' convert it with additional command line argument -DRELATIVE_INCLUDE=\".\" to use locally</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"299\" x=\"5\" y=\"155.9063\">!if %variable_exists(\"RELATIVE_INCLUDE\")</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"495\" x=\"15\" y=\"172.3945\">!include %get_variable_value(\"RELATIVE_INCLUDE\")/C4_Context.puml</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"9\" x=\"5\" y=\"188.8828\">...</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"169\" x=\"5\" y=\"205.3711\">... ( skipping 288 lines )</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"9\" x=\"5\" y=\"221.8594\">...</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"196\" x=\"15\" y=\"238.3477\">!if ($shadowing == \"false\")</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"698\" x=\"25\" y=\"254.8359\">!$elementSkin = $elementSkin + \"    Shadowing&lt;&lt;\" + $tagStereo + \"&gt;&gt; \" + \"false\" + %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"41\" x=\"15\" y=\"271.3242\">!endif</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"665\" x=\"15\" y=\"287.8125\">' only rectangle supports shape(d corners), define both skinparam that overlays are working</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"325\" x=\"15\" y=\"304.3008\">!if ($shape != \"\" &amp;&amp; $element == \"rectangle\")</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"232\" x=\"25\" y=\"320.7891\">!if ($shape == $ROUNDED_BOX)</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"643\" x=\"35\" y=\"337.2773\">!$elementSkin = $elementSkin + \"    RoundCorner \" + $ROUNDED_BOX_SIZE+ %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"531\" x=\"35\" y=\"353.7656\">!$elementSkin = $elementSkin + \"    DiagonalCorner \" + \"0\" + %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"245\" x=\"25\" y=\"370.2539\">!elseif ($shape == $EIGHT_SIDED)</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"513\" x=\"35\" y=\"386.7422\">!$elementSkin = $elementSkin + \"    RoundCorner \" + \"0\" + %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"645\" x=\"35\" y=\"403.2305\">!$elementSkin = $elementSkin + \"    DiagonalCorner \" + $EIGHT_SIDED_SIZE+ %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"41\" x=\"25\" y=\"419.7188\">!endif</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"41\" x=\"15\" y=\"436.207\">!endif</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"357\" x=\"15\" y=\"452.6953\">!$elementSkin = $elementSkin + \"}\" + %newline()</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"151\" x=\"15\" y=\"469.1836\">!return $elementSkin</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"90\" x=\"5\" y=\"485.6719\">!endfunction</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"0\" x=\"10\" y=\"502.1602\"/><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"795\" x=\"5\" y=\"518.6484\">!unquoted procedure $defineSkinparams($tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"303\" x=\"15\" y=\"535.1367\">' only rectangle supports shape(d corners)</text><text fill=\"#33FF02\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"856\" x=\"15\" y=\"551.625\">!$tagSkin = $elementTagSkinparams(\"rectangle\", $tagStereo, $bgColor, $fontColor, $borderColor, $shadowing, $shape)</text><text fill=\"#FF0000\" font-family=\"sans-serif\" font-size=\"14\" font-weight=\"bold\" lengthAdjust=\"spacingAndGlyphs\" textLength=\"211\" x=\"10\" y=\"568.1133\">Unknown variable $tagStereo</text></g></svg>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "const plantuml = require('plantuml');\n",
    "const tslab = require(\"tslab\");\n",
    "const svg = await plantuml(`\n",
    "@startuml\n",
    "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml\n",
    "\n",
    "Person_Ext(issuer, \"Issuer\")\n",
    "Boundary(b1,\"Verification\") {\n",
    "Person(holder, \"Holder\", $sprite=\"person2\")\n",
    "Person(verifier, \"Verifier\")\n",
    "}\n",
    "\n",
    "Rel_L(issuer, holder, \"issue VC\", \"Request for offer\")\n",
    "Rel(holder, issuer, \"claim\", \"Response for offer\")\n",
    "Rel_R(verifier, holder, \"ask for VCs\", \"Request for sharing\")\n",
    "Rel(holder, verifier, \"issue signed VP\", \"VP\", $sprite = \"&envelope-closed\")\n",
    "\n",
    "@enduml\n",
    "`);\n",
    "tslab.display.svg(svg)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "5a250b1e-979c-4e2f-bac5-2f143214a253",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<img src=\"http://www.plantuml.com/plantuml/svg/NP5HIyCm58NVyojY4DbWMr5y4WR38YXC60FxMhBcTWscDp4tcOhutqrZAMCluN9pldDE6xQX87s8lM5N6XiJ5V0k14SFHU7bv-geGnSFaS0t5WDWM3MsBvoHE31B2iheGr7UBtV3wkrrM_II0lYqgij4I8tWLsxmPplmPB5--WepJHJ1BxXuoOEOiqSRKKd_FJlSBaG5NhUwaK5R57F-CwAppXgLiUSyY0M_9kTrWBLmMN6Nd4RjANjaTJMEwVANiJsOUZirc2ppWbTbCXLx-8X0WRVMSzkscKpOb3_LRupK_Jz1pYB19LBlpufCMPBUix0gwJAEEkar7Yy2ppxcloVf8uBYrMxWypd-2RxcuWRm1COwM3R64gXanZQ0QdY5Fm00\"/>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "const plantumlEncoder = require('plantuml-encoder')\n",
    "const tslab = require(\"tslab\"); \n",
    "var encoded = plantumlEncoder.encode(`\n",
    "@startuml\n",
    "!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml\n",
    "\n",
    "Person_Ext(issuer, \"Issuer\")\n",
    "Boundary(b1,\"Verification\") {\n",
    "Person(holder, \"Holder\", $sprite=\"person2\")\n",
    "Person(verifier, \"Verifier\")\n",
    "}\n",
    "\n",
    "Rel_L(issuer, holder, \"issue VC\", \"Request for offer\")\n",
    "Rel(holder, issuer, \"claim\", \"Response for offer\")\n",
    "Rel_R(verifier, holder, \"ask for VCs\", \"Request for sharing\")\n",
    "Rel(holder, verifier, \"issue signed VP\", \"VP\", $sprite = \"&envelope-closed\")\n",
    "\n",
    "@enduml\n",
    "`)\n",
    " \n",
    "var url = 'http://www.plantuml.com/plantuml/svg/' + encoded\n",
    "tslab.display.html(`<img src=\"${url}\"/>`)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "283505d4-eec1-48ce-8eda-140b4e0b8409",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "TypeScript",
   "language": "typescript",
   "name": "tslab"
  },
  "language_info": {
   "codemirror_mode": {
    "mode": "typescript",
    "name": "javascript",
    "typescript": true
   },
   "file_extension": ".ts",
   "mimetype": "text/typescript",
   "name": "typescript",
   "version": "3.7.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}