diff --git a/.vitepress/config.js b/.vitepress/config.js index 0bfab873f3..4b10f941fc 100644 --- a/.vitepress/config.js +++ b/.vitepress/config.js @@ -194,10 +194,12 @@ if (process.env.VITE_CAPIRE_EXTRA_ASSETS) { import { dl } from '@mdit/plugin-dl' import * as MdAttrsPropagate from './lib/md-attrs-propagate' import * as MdTypedModels from './lib/md-typed-models' +import * as MdDiagramSvg from './lib/md-diagram-svg' config.markdown.config = md => { MdAttrsPropagate.install(md) MdTypedModels.install(md) + MdDiagramSvg.install(md) md.use(dl) } diff --git a/.vitepress/lib/md-diagram-svg.ts b/.vitepress/lib/md-diagram-svg.ts new file mode 100644 index 0000000000..583ec39934 --- /dev/null +++ b/.vitepress/lib/md-diagram-svg.ts @@ -0,0 +1,51 @@ +import { MarkdownEnv, MarkdownRenderer } from 'vitepress' + +/** + * Renders SVG diagrams in markdown files as element. + * This allows the diagrams to be interactive. + * + * To use, add `?raw` to the end of the image source, e.g. `![](diagram.svg?raw)`. + */ +export function install(md: MarkdownRenderer) { + const defaultImage = + md.renderer.rules.image || + ((tokens, idx, options, env, self) => self.renderToken(tokens, idx, options)) + + md.renderer.rules.image = (tokens, idx, options, env: MarkdownEnv, self) => { + const token = tokens[idx] + const src = token.attrGet('src') || '' + + if (!/\.svg\?raw$/.test(src)) { + return defaultImage(tokens, idx, options, env, self) + } + + const name = 'svg_' + src.replace('?raw', '').replace(/[^a-zA-Z0-9_]/g, '_') // stable variable name for the imported SVG content + const importPath = src.startsWith('/') && src.startsWith('.') ? src : './' + src + + const sfcBlocks = env.sfcBlocks! + if (!sfcBlocks.scriptSetup) { + sfcBlocks.scriptSetup = { + content: '', + contentStripped: '\n', + tagClose: '', + tagOpen: '` + } +} diff --git a/.vitepress/theme/styles.scss b/.vitepress/theme/styles.scss index 2989dbbbde..f05e4c6870 100644 --- a/.vitepress/theme/styles.scss +++ b/.vitepress/theme/styles.scss @@ -312,6 +312,23 @@ img, video.bright { } } +// Raw svg diagrams +.diagram { + all: initial; // preserve original svg formatting + svg { + .dark & { // recolor in dark mode + filter: brightness(.884) invert(1) hue-rotate(177deg); + } + max-width: 100%; + height: auto; + margin: 30px auto; + + * { + // drawio line-height is not updated when font size is changed leading to misaligned text + line-height: unset !important; + } + } +} .VPBadge { diff --git a/cds/assets/cxl/expr.drawio.svg b/cds/assets/cxl/expr.drawio.svg index ec58b9777e..b3e9cdc703 100644 --- a/cds/assets/cxl/expr.drawio.svg +++ b/cds/assets/cxl/expr.drawio.svg @@ -1,4 +1,865 @@ - - - -
path expression
path expression
literal value
literal value
infix operator
infix operator
expr
expr
expr
expr
function call
function call
(
(
)
)
expr
expr
,
,
expr
expr
BETWEEN
BETWEEN
expr
expr
NOT
NOT
AND
AND
expr
expr
expr
expr
THEN
THEN
expr
expr
expr
expr
END
END
WHEN
WHEN
CASE
CASE
expr
expr
ELSE
ELSE
prefix operator
prefix operator
expr
expr
postfix operator
postfix operator
expr
exprText is not SVG - cannot display \ No newline at end of file + + + + + + + + + + + + + + + + + + +
+
+
+ path expression +
+
+
+ + + path expression + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ literal value +
+
+
+ + + literal value + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ infix operator +
+
+
+ + + infix operator + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + +
+
+
+ function call +
+
+
+ + + function call + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + ( + +
+
+
+ + + ( + + + + + + + + + + + +
+
+
+ + ) + +
+
+
+ + + ) + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + +
+
+
+ + , + +
+
+
+ + + , + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ BETWEEN +
+
+
+ + + BETWEEN + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ NOT +
+
+
+ + + NOT + + + + + + + + + + + + + + + + + +
+
+
+ AND +
+
+
+ + + AND + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ THEN +
+
+
+ + + THEN + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + +
+
+
+ END +
+
+
+ + + END + + + + + + + + + + + + + + + + + +
+
+
+ WHEN +
+
+
+ + + WHEN + + + + + + + + + + + + + + + + + +
+
+
+ CASE +
+
+
+ + + CASE + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ ELSE +
+
+
+ + + ELSE + + + + + + + + + + + + + + + + + +
+
+
+ prefix operator +
+
+
+ + + prefix operator + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + +
+
+
+ postfix operator +
+
+
+ + + postfix operator + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + Text is not SVG - cannot display + + + + diff --git a/cds/assets/cxl/function.drawio.svg b/cds/assets/cxl/function.drawio.svg index 3b02ed0bdc..85b042d1b9 100644 --- a/cds/assets/cxl/function.drawio.svg +++ b/cds/assets/cxl/function.drawio.svg @@ -1,184 +1,155 @@ - + - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
- - ( - -
-
-
- - - ( - - - - - - - - - - - - - -
-
-
- - ) - -
-
-
- - - ) - - - - - - - - - - - - - - - - - - - -
-
-
- expr -
-
-
- - - expr - - - - - - - - - - - - - -
-
-
- - , - -
-
+ + + + + + + + + + + + + + + + + +
+
+
+ + ( + +
+
+
+ + + ( + + + + + + + + + + + +
+
+
+ + ) + +
+
+
+ + + ) + + + + + + + + + + + + + + + + +
+
+
+ expr
- - - , - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+ + + expr + + - - - - - - - - - - - - - - -
-
-
- function name -
-
+ + + + + + + + + +
+
+
+ + , + +
+
+
+ + + , + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ function name
- - - function name - - - - +
+
+ + + function name + + - + diff --git a/cds/assets/cxl/infix-filter.drawio.svg b/cds/assets/cxl/infix-filter.drawio.svg index 97e1ca4524..15246dd5a5 100644 --- a/cds/assets/cxl/infix-filter.drawio.svg +++ b/cds/assets/cxl/infix-filter.drawio.svg @@ -1,4 +1,139 @@ - - - -
[
[
]
]
expr
expr
where
whereText is not SVG - cannot display \ No newline at end of file + + + + + + + + + + + + + + + + + + + + +
+
+
+ + [ + +
+
+
+ + + [ + + + + + + + + + + + +
+
+
+ + ] + +
+
+
+ + + ] + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + where + + +
+
+
+ + + where + + + + + + + + + + + + + + + + + + + Text is not SVG - cannot display + + + + diff --git a/cds/assets/cxl/operators.drawio.svg b/cds/assets/cxl/operators.drawio.svg index 4b7de24ac5..7c5e1fd864 100644 --- a/cds/assets/cxl/operators.drawio.svg +++ b/cds/assets/cxl/operators.drawio.svg @@ -1,4 +1,653 @@ - - - -
infix operator
infix operator
expr
expr
expr
expr
expr
expr
BETWEEN
BETWEEN
expr
expr
NOT
NOT
AND
AND
expr
expr
expr
expr
THEN
THEN
expr
expr
expr
expr
END
END
WHEN
WHEN
CASE
CASE
expr
expr
ELSE
ELSE
prefix operator
prefix operator
expr
expr
postfix operator
postfix operator
expr
exprText is not SVG - cannot display \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + +
+
+
+ infix operator +
+
+
+ + + infix operator + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ BETWEEN +
+
+
+ + + BETWEEN + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ NOT +
+
+
+ + + NOT + + + + + + + + + + + + + + + + + +
+
+
+ AND +
+
+
+ + + AND + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + +
+
+
+ THEN +
+
+
+ + + THEN + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + +
+
+
+ END +
+
+
+ + + END + + + + + + + + + + + + + + + + + +
+
+
+ WHEN +
+
+
+ + + WHEN + + + + + + + + + + + + + + + + + +
+
+
+ CASE +
+
+
+ + + CASE + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ ELSE +
+
+
+ + + ELSE + + + + + + + + + + + + + + + + + +
+
+
+ prefix operator +
+
+
+ + + prefix operator + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + + + +
+
+
+ postfix operator +
+
+
+ + + postfix operator + + + + + + + + + + + + + + + + + +
+
+
+ expr +
+
+
+ + + expr + + + + + + + + + + + + + + + + + + + Text is not SVG - cannot display + + + + diff --git a/cds/assets/cxl/ref.drawio.svg b/cds/assets/cxl/ref.drawio.svg index c67f582c61..be2c7c82bd 100644 --- a/cds/assets/cxl/ref.drawio.svg +++ b/cds/assets/cxl/ref.drawio.svg @@ -1,4 +1,190 @@ - - - -
leaf element
leaf element
struct
struct
association
association
infix filter
infix filter
.
.Text is not SVG - cannot display \ No newline at end of file + + + + + + + + + + + + + + + +
+
+
+ leaf element +
+
+
+ + + leaf element + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ struct +
+
+
+ + + struct + + + + + + + + + + + + + + + + + +
+
+
+ association +
+
+
+ + + association + + + + + + + + + + + + + + + + + + + + +
+
+
+ infix filter +
+
+
+ + + infix filter + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + . + +
+
+
+ + + . + + + + + + + + + + Text is not SVG - cannot display + + + + diff --git a/cds/cxl.md b/cds/cxl.md index 6bfc44f708..9e1a482f4e 100644 --- a/cds/cxl.md +++ b/cds/cxl.md @@ -85,7 +85,7 @@ select from Books { This syntax diagram describes the possible expressions: -![](assets/cxl/expr.drawio.svg) +![](assets/cxl/expr.drawio.svg?raw) > Using: > [Path Expressions](#ref), @@ -262,7 +262,7 @@ A `ref` (short for reference) is used to refer to an element within the model. It can be used to navigate along path segments. Such a navigation is often referred to as a **path expression**. -![](assets/cxl/ref.drawio.svg) +![](assets/cxl/ref.drawio.svg?raw) > Using: > [Infix Filters](#infix-filters) @@ -459,7 +459,7 @@ If we apply this terminology to [path-expressions](#ref), an infix filter condit that is applied to a path-segment of a [path-expression](#ref). This allows you to filter the target of an association based on certain criteria. -![](assets/cxl/infix-filter.drawio.svg) +![](assets/cxl/infix-filter.drawio.svg?raw) > Using: > [Expressions](#expr) @@ -778,7 +778,7 @@ navigates along the `author` association of the `Books` entity only if the autho As depicted in below excerpt of the syntax diagram for `expr`, CXL supports all the standard SQL operators as well as a few additional ones, such as the `?` operator to check for the existence of a path. -![](assets/cxl/operators.drawio.svg) +![](assets/cxl/operators.drawio.svg?raw) > Using: > [Expressions](#expr) @@ -814,7 +814,7 @@ Following table gives an overview of the guaranteed supported operators in CXL: ## Functions (`func`) ###### func -![](assets/cxl/function.drawio.svg) +![](assets/cxl/function.drawio.svg?raw) > Using: > [Expressions](#expr)