Convert your ascii diagram scribbles into happy little SVG
Home Page: http://ivanceras.github.io/svgbob-editor/
License: Apache License 2.0
Svgbob can create a nice graphical representation of your text diagrams.
Svgbob provides a cli which takes text as an input and creates an svg image as an output.
Sometime a char is treated as diagram char when it was intended to be word char.
Example 1:
co-edit
single-person
Is rendered as:
The hyphen after o is treated as a horizontal line.
Example 2:
(some remark)
some text
(some remark)
some text
Is rendered as:
The open bracket between lines is rendered as a diagram which the close bracket is still rendered as text.
Hi there! Awesome project. I wanted to ask if it is possible to somehow tell renderer that "this character is just text"? I am trying to render Ruby's object diagram from the official book:
+---------+ +-...
| | |
BasicObject-----|-->(BasicObject)-------|-...
^ | ^ |
| | | |
Object---------|----->(Object)---------|-...
^ | ^ |
| | | |
+-------+ | +--------+ |
| | | | | |
| Module-|---------|--->(Module)-|-...
| ^ | | ^ |
| | | | | |
| Class-|---------|---->(Class)-|-...
| ^ | | ^ |
| +---+ | +----+
| |
obj--->OtherClass---------->(OtherClass)-----------...
...and the SvgBobRus understands it pretty well, but replaces most of the "O"s with special symbols (note also it can't guess two arrows under the "Class" at the bottom):
As of current master:
$ cargo build
$ echo ' <~~~~~~~~~~~~~~>' | target/debug/svgbob > test.svgIt looks okay in Chrome and Firefox, but Safari does this:
It would be good to avoid marker-start/marker-end and instead use a polygon class="filled" to position and draw the arrowheads.
I compiled svgbob using wasm-pack build --target web and I'm trying to import it into an html file as described here but it gives me import errors and I don't know what I'm supposed to import. I tried importing both svgbob and to_svg neither of which worked.
Can you give me any pointers on how to use this within an html file?
Raising this out of this thread to not digress too much.
Should svgbob allow the ability to style nodes? It would be nice to be able to do it so that diagrams can be represented in text and still support colour. The ascii version of the diagram is not very readable with styling information included in each node. @ivanceras gave an example of using single letters to represent colour, but I foresee potential use cases for additional styling.
I've copied a bit of the post and edited it to see what it may look like:
.---------. .-----------.
( Alice {a} ) ----> / Bob {b,c} /
`---------' '-----------'
.---------. .----------.
( Apple {a} ) ----> / Ball {b} /
`---------' '----------'
# Legend:
a: { color: red }
b: { color: blue }
c: { opacity: 0.5 }
Also, what about people wanting to style lines? Maybe we leave that as a separate topic.
This is because the ... no longer compiles:-
Compiling svgbob v0.2.2
Running `rustc --crate-name svgbob /Users/raph/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.2.2/src/lib.rs --crate-type lib --emit=dep-info,metadata -C debuginfo=2 -C metadata=6aeea909a17cac5e -C extra-filename=-6aeea909a17cac5e --out-dir /Volumes/Source/GitHub/lemonrock/cordial/.cargo/target/debug/deps -L dependency=/Volumes/Source/GitHub/lemonrock/cordial/.cargo/target/debug/deps --extern unicode_width=/Volumes/Source/GitHub/lemonrock/cordial/.cargo/target/debug/deps/libunicode_width-6a33041d7c0c2e86.rmeta --extern pom=/Volumes/Source/GitHub/lemonrock/cordial/.cargo/target/debug/deps/libpom-90421312374529fb.rmeta --extern svg=/Volumes/Source/GitHub/lemonrock/cordial/.cargo/target/debug/deps/libsvg-b4b89173624de942.rmeta --cap-lints allow`
error: `...` syntax cannot be used in expressions
--> /Users/raph/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.2.2/src/lib.rs:1071:38
|
1071 | matches.push(input3[start...end].to_string());
| ^^^
|
= help: Use `..` if you need an exclusive range (a < b)
= help: or `..=` if you need an inclusive range (a <= b)
error: `...` syntax cannot be used in expressions
--> /Users/raph/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.2.2/src/lib.rs:1102:38
|
1102 | matches.push(input3[start...end].to_string());
| ^^^
|
= help: Use `..` if you need an exclusive range (a < b)
= help: or `..=` if you need an inclusive range (a <= b)Hi,
I notice a different rendering of the sequence:
. \ \ '--- The::Latest
/| \ \ \
With::Some::fantasy ' \ \ '---- The::Latest::Greatest
/| \ \
More::Stuff ' \ '- I::Am::Running::Out::Of::Ideas
/| \
More::Stuff ' \
/ '--- Last::One
More::Stuff
in svgbob and https://ivanceras.github.io/elm-examples/elm-bot-lines/
In a terminal the use of quote "'" rather than dot "." looks better in ASCII. Could you unify the rendering so both render the same way
If you think I am picky and have an hawk eye, it's because I have drawn most of the example you use in the old version and they grabbed my eye today when I saw this project for the first time.
I think I may steal from you one or two stencils, I like the circles rendering, in fact I like this project very much.
I just tried
curl https://sh.rustup.rs -sSf | sh
cargo install svgbob_cli
and got
cargo install svgbob_cli
Updating registry `https://github.com/rust-lang/crates.io-index`
Compiling unicode-width v0.1.5
Compiling ansi_term v0.11.0
Compiling vec_map v0.8.1
Compiling libc v0.2.47
.cargo/registry/src/github.com-1ecc6299db9ec823/ansi_term-0.11.0/src/ansi.rs:25:9: 25:28 error: the `?` operator is not stable (see issue #31436)
.cargo/registry/src/github.com-1ecc6299db9ec823/ansi_term-0.11.0/src/ansi.rs:25 write!(f, "\x1B[")?;
^~~~~~~~~~~~~~~~~~~
and a whole lot more like that.
svgbob has problems when using certain characters, notably multipoint emoji like the helmet with white cross:
.~~~~~~~~~~~~~~~~~~~~.
! ⛑️ Problem Emoji :
'~~~~~~~~~~~~~~~~~~~~'
The spacing gets out of whack, make the ascii drawing not mach up in line spacing with the output
SVG -> ASCII
I think the screenshot below sums it up. You can see that the arrow is broken for all of my apps but Chrome.
The chart:
.-------.
| Hello |
'-------'
|
v
.-------.
| World |
'-------'
Thanks for developing this service!
Hello !
Is there a way to display crossing diagonals ? Example:
------------.
\ .-------------
\
/ '------------>
------------'
The diagonal crossing is incomplete. It would be nice to have access to X for that job:
------------.
\ .-------------
X
/ '------------>
------------'
Thanks,
Hi,
I keep trying to draw a representative pie chart, but circles are very finicky, and every time I change them up a little, the circle breaks. Could you give pointers on how to create a circle that looks like a pie chart?
The text below renders properly in the svgbob editor, downloading the svg file and opening it in a browser didn't work. I tried Chrome and Edge.
.---------------------------------------------------.
| releaser |
|---------------------------------------------------|
| .------------------------. |
| | semla_OEM | |
| |------------------------| |
.-------------. | | .--------------------. | |
| library dir |----------------------------->| packagetool_OEM |------------------------------.
'-------------' .------------------. | | '--------------------' | | |
| build_config_OEM | | | .--------------------. | | |
|------------------| | | | LVE_OEM | | | |
| encryption keys |------>| |--------------------| | | |
| licensing type | | | | .----------------. | | | |
'------------------' | | | | decryption_OEM | | | | |
| | | '----------------' | | | |
| | | .----------------. | | | |
| | | | licensing_OEM | | | | |
| | | '----------------' | | .----------------. | |
| | '--------------------' | | HTML Generator | | |
| '------------------------' '----------------' | |
| | | | |
'---------------|------------------------|----------' |
| V |
.-----------------------------------. | .--------------------. |
| library.mol | | | HTML documentation | |
|-----------------------------------| | '--------------------' |
| | | |
| .--------------------. | | |
| | LVE_OEM | | | |
| |--------------------| | | |
| | .----------------. | | copied to | |
| | | decryption_OEM | | | | |
| | '----------------' |<-----------------------' |
| | .----------------. | | |
| | | licensing_OEM | | | |
| | '----------------' | | |
| '--------------------' | encrypted |
| .-------------. | |
| | library.moc |<--------------------------------------------------------------------'
| '-------------' |
'-----------------------------------'
When trying to install with cargo, I get the following error
Updating registry `https://github.com/rust-lang/crates.io-index`
Installing svgbob_cli v0.3.0
Compiling libc v0.2.43
Compiling unicode-width v0.1.5
Compiling vec_map v0.8.1
Compiling ansi_term v0.11.0
Compiling bitflags v1.0.4
Compiling pom v1.1.0
Compiling svg v0.5.11
Compiling strsim v0.7.0
Compiling textwrap v0.10.0
Compiling atty v0.2.11
Compiling clap v2.32.0
Compiling svgbob v0.3.0
error[E0433]: failed to resolve. Use of undeclared type or module `svg`
--> /home/leonard/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.3.0/src/element.rs:420:33
|
420 | let text_node = svg::node::Text::new(string.to_string());
| ^^^ Use of undeclared type or module `svg`
error[E0433]: failed to resolve. Use of undeclared type or module `pom`
--> /home/leonard/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.3.0/src/grid.rs:636:23
|
636 | fn escape_string() -> pom::parser::Parser<'static, char, (usize, usize)> {
| ^^^ Use of undeclared type or module `pom`
error[E0433]: failed to resolve. Use of undeclared type or module `pom`
--> /home/leonard/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.3.0/src/grid.rs:643:20
|
643 | fn line_parse() -> pom::parser::Parser<'static, char, Vec<(usize, usize)>> {
| ^^^ Use of undeclared type or module `pom`
error[E0554]: #![feature] may not be used on the stable release channel
--> /home/leonard/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.3.0/src/lib.rs:33:1
|
33 | #![feature(extern_prelude)]
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^
error: aborting due to 4 previous errors
Some errors occurred: E0433, E0554.
For more information about an error, try `rustc --explain E0433`.
error: Could not compile `svgbob`.
warning: build failed, waiting for other jobs to finish...
error: failed to compile `svgbob_cli v0.3.0`, intermediate artifacts can be found at `/tmp/cargo-installOjHfGN`
Caused by:
build failed
diagram fence code block:
________
|________| ----> SVG
pulldown-cmark/pulldown-cmark#9
Plugin API for pulldown-cmark should be implemented first, in order to plug this as fence code extension
Normally there is no gap between adjacent + and *, eg:
--+*
but if the two are vertically aligned, there is a gap:
*----.
--+ ab |
| ab |
--*----'
+
also, when simply vertically align the two, * is treated as a character:
|
+
*
With using rsvglib(as rsvg-convert) on Mac, conversion is not great; output is dropping "lines".
I am not sure this is rsvglib matter or svgbob.
input.txt:
o VDD
|
+++
| |
+++ +
THRESHOLD | + |\ +-------+ +
o------------------+ \ | | |\
| | +--| R | | \
*-----+ / | | +---------------+ +o----------o
| - |/ | | | | / OUTPUT
+++ + | | | |/
| | | | | +
+++ + | | | o DISCHARGE
| + |\ | | | |
*-----+ \ | | | |'
nTRIGGER | | +--| S nQ o-*---+ NPN
o------------------+ / | | |`>
| - |/ +---o---+ |
+++ + | |
| | | |
+++ | |
| | |
*---------------------------+
| |
o GND |
nRESET |
o----------------------------+
$ input.txt -o svg.svg
$ rsvg-convert -f png svg.svg -o png.png
SVG output(screenshot) is great like
while conversion to png is like
Output from installing from AUR with latest rust package:
$ makepkg -s
==> Making package: svgbob-git 0.4.1.r323.43fb036-1 (ons 18 sep 2019 13:27:47)
==> Checking runtime dependencies...
==> Checking buildtime dependencies...
==> Retrieving sources...
-> Updating svgbob git repo...
Fetching origin
==> Validating source files with md5sums...
svgbob ... Skipped
==> Extracting sources...
-> Creating working copy of svgbob git repo...
Reset branch 'makepkg'
==> Starting pkgver()...
==> Updated version: svgbob-git 0.4.1.r324.c3e84c8-1
==> Removing existing $pkgdir/ directory...
==> Starting build()...
Compiling svgbob_cli v0.4.1 (/home/micke/packages/aur/svgbob-git/src/svgbob/svgbob_cli)
error: the item `exit` is imported redundantly
--> src/main.rs:86:25
|
16 | use std::process::exit;
| ------------------ the item `exit` is already imported here
...
86 | use std::process::exit;
| ^^^^^^^^^^^^^^^^^^
|
note: lint level defined here
--> src/main.rs:1:9
|
1 | #![deny(warnings)]
| ^^^^^^^^
= note: #[deny(unused_imports)] implied by #[deny(warnings)]
error: the item `exit` is imported redundantly
--> src/main.rs:127:17
|
16 | use std::process::exit;
| ------------------ the item `exit` is already imported here
...
127 | use std::process::exit;
| ^^^^^^^^^^^^^^^^^^
error: the item `exit` is imported redundantly
--> src/main.rs:151:21
|
16 | use std::process::exit;
| ------------------ the item `exit` is already imported here
...
151 | use std::process::exit;
| ^^^^^^^^^^^^^^^^^^
error: trait objects without an explicit `dyn` are deprecated
--> src/main.rs:166:47
|
166 | fn build(args: &ArgMatches) -> Result<(), Box<Error>> {
| ^^^^^ help: use `dyn`: `dyn Error`
|
note: lint level defined here
--> src/main.rs:1:9
|
1 | #![deny(warnings)]
| ^^^^^^^^
= note: #[deny(bare_trait_objects)] implied by #[deny(warnings)]
error: trait objects without an explicit `dyn` are deprecated
--> src/main.rs:227:68
|
227 | fn convert_file(input: PathBuf, output: PathBuf) -> Result<(), Box<Error>> {
| ^^^^^ help: use `dyn`: `dyn Error`
error: aborting due to 5 previous errors
error: Could not compile `svgbob_cli`.
To learn more, run the command again with --verbose.
==> ERROR: A failure occurred in build().
Aborting...
I would like to make a pandoc filter that does basically what spongedown does with ascii drawings. But I can't find how to properly pass a multiline string to svgbob through the command line.
How is this done ?
On Windows, I have tried things like :
echo "+--+\n| |\n+--+" | svgbob
but the \n are kept as they are, and trying to pass the raw string from python actually ends the command in the middle of the string, effectively yielding an echo of the first line of the drawing.
The README says to use:
cargo install svgbob_cli
but the package fails:
Compiling svgbob v0.2.0
error[E0554]: #[feature] may not be used on the stable release channel
--> .cargo/registry/src/github.com-1ecc6299db9ec823/svgbob-0.2.0/src/lib.rs:33:1
|
33 | #![feature(test)]
| ^^^^^^^^^^^^^^^^^
error: aborting due to previous error
error: Could not compile `svgbob`.
Build failed, waiting for other jobs to finish...
The generated SVG file includes a duplicate attribute. When the file is opened directly, Firefox refuses to display it with the following message:
Input (it's from #58):
.-------.
| Hello |
'-------'
|
v
.-------.
| World |
'-------'
Output (excerpt):
<line x1="36" y1="48" x2="36" y2="80" class="solid" class="end_marked_arrow"></line><svg xmlns="http://www.w3.org/2000/svg" width="80" height="144">
<style>line, path, circle,rect,polygon {
stroke: black;
stroke-width: 2;
stroke-opacity: 1;
fill-opacity: 1;
stroke-linecap: round;
stroke-linejoin: miter;
}
text {
fill: black;
}
rect.backdrop{
stroke: none;
fill: white;
}
.broken{
stroke-dasharray: 8;
}
.filled{
fill: black;
}
.bg_filled{
fill: white;
}
.nofill{
fill: white;
}
text {
font-family: monospace;
font-size: 14px;
}
.end_marked_arrow{
marker-end: url(#arrow);
}
.start_marked_arrow{
marker-start: url(#arrow);
}
.end_marked_diamond{
marker-end: url(#diamond);
}
.start_marked_diamond{
marker-start: url(#diamond);
}
.end_marked_circle{
marker-end: url(#circle);
}
.start_marked_circle{
marker-start: url(#circle);
}
.end_marked_open_circle{
marker-end: url(#open_circle);
}
.start_marked_open_circle{
marker-start: url(#open_circle);
}
.end_marked_big_open_circle{
marker-end: url(#big_open_circle);
}
.start_marked_big_open_circle{
marker-start: url(#big_open_circle);
}
</style>
<defs>
<marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<polygon points="0,0 0,4 4,2 0,0"></polygon>
</marker>
<marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
</marker>
<marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="2" class="filled"></circle>
</marker>
<marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="2" class="bg_filled"></circle>
</marker>
<marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
<circle cx="4" cy="4" r="3" class="bg_filled"></circle>
</marker>
</defs>
<rect class="backdrop" x="0" y="0" width="80" height="144"></rect>
<rect x="4" y="8" width="64" height="32" class="solid nofill" rx="4"></rect>
<text x="18" y="28" class="">Hello</text>
<rect x="4" y="88" width="64" height="32" class="solid nofill" rx="4"></rect>
<text x="18" y="108" class="">World</text>
<line x1="36" y1="48" x2="36" y2="80" class="solid" class="end_marked_arrow"></line>
</svg>Hi,
I tried to build the 0.2.* set of version on the rust 1.23.0 and it do not build, I would prefer to see the crates published to build on the stable maybe the feature that need the unstable may be disabled on release, and as well who use unstable is more willing to build from source.
Regards
Everywhere except the drawing lines and characters.
Could svgbob be used as a proc macro?
I'm thinking:
///
///
#[svgbob(
|
|--------> Some cool diagram here which would magically turn into svg tags #[doc('...')]
|
)]
fn my_fun() {}
Has someone had a go yet? Would be cool. (Getting svgbob integrated into the main rust docs would be even cooler)
Normally one CJK character equal two english character width, the following will be closed.
+----+
| 一 |
+----+
If the line contains escape qutoe, the CJK character seems need 3 english character spaces to get
the shape closed.
+--------+
|"""一"""|
+--------+
I am using svgbob 0.3.2.
Hi @ivanceras
Thanks for building this cool tool 👍
I've made a Homebrew formula for svgbob CLI, but, as of writing this, svgbob's latest release is marked as 0.5.0-alpha.6, preventing it from inclusion in the core tap.
I agreed to move it to a personal tap → https://github.com/vladimyr/homebrew-vladimyr/blob/00b11f4/Formula/svgbob.rb and let you know to feel free resubmit it once svgbob gets its first stable release 😉
When editing, arrowheads sometimes appear at the end of lines.
(I encountered this issue with the online editor)
Steps to reproduce:
Start with an empty editor, paste this:
|
|
---------------->
|
|
Correct result:
Change to this (edit that one character):
|
v
---------------->
|
|
The result is still correct:
Undo it, or change that one character back:
|
|
---------------->
|
|
The image is incorrect:
After this, type a letter here:
|
|a
---------------->
|
|
Image:
Then erase/undo it:
|
|
---------------->
|
|
An arrow appeared at the bottom:
After refreshing the page and pasting the same text back again, it works.
The shapes are all cramped together in one big path, and it is not possible for further styling.
This is requirement for issue #11
They are used in digital signal block graphs.
I really like svgbob and I've started using it to mock up diagrams and automatically include them into my LaTex. However, when I come to do final copies, I'll probably want to tweak the diagrams by hand in Inkscape. [1]
I've noticed that some lines seem to be drawn as part of one huge path, for example:
Although this can be broken apart, each connected component is then composed of multiple tiny paths which are painful to manipulate.
Is this intended or desirable behavior for some other purpose? If not, it would be great to have them as separate path objects in the svg.
[1] inkscape -D -z --file=bob_file.svg --export-pdf=bob_out.pdf --export-latex and then including the generated Tex file.
The crate currently doesn't hold a binary that reads a diagram specification and produces an SVG. This would be a great addition, and would allow users to use svgbobrus by simply running cargo install svgbob.
When I generate diagrams containing text it often happens that the spaces between text disappears. The given example will contain OPENFILE and ACCESSFILE in the result. As a dirty fix to this I can add a double space i.e OPEN FILE and ACCESS FILE, but that makes the ascii look a bit wacky.
This will also happen in the demo editor so please try.
Example
| OPEN FILE
| (1 time)
| ACCESS FILE
|
\ PRINT DETAILS
Some labels contain characters (or character combinations) that are rendered as paths, although this might not be intended by the user. Currently, there does not seem to be a way to prevent this (correct me if I'm wrong?).
Example:
+---------+
| a.to(b) |
+---------+
The o( in to(b) are rendered as a small circle and an arc of a bigger circle, rather than the characters o and (.
Proposal:
Add the possibility to escape labels, e.g. using backticks. Everything between backticks within one line will be rendered as text (single label, with normal word spacing):
+---------+
|`a.to(b)`|
+---------+
What would be useful would be a method of returning a svg image from a request URL containing the source text, similar to SciWeavers site to return an image from Latex text (http://www.sciweavers.org/tex2img.php?eq=\sum_{i=1}^{n}x_{i}^{2}&bc=cornsilk&fc=black&im=jpg&fs=24&ff=arev).
The "Other Example" you provide has a lot of shapes that don't connect properly, like:
.-.
| |
.---------.
| |
'---------'
| |
'-'
In this example, the ends of both lozenges don't connect to their sides; you instead have to widen things so they connect:
.---.
| |
.-----------.
| |
'-----------'
| |
'---'
I'm not sure if this is intended behavior or not, but it affects a lot of images in this example page, so I assume it must have worked at some point.
take an svg, produce a text file with Unicode characters
cat ~/nadim/devel/repositories/perl_modules/P5-App-Asciio/lib/App/Asciio.pm
| svgbob > test.svg
thread 'main' panicked at 'called Result::unwrap() on an Err value: Custom { kind: InvalidData, error: "stream did not contain valid UTF-8" }', /home/nadim/.cargo/registry/src/github.com-1ecc6299db9ec823/svgbob_cli-0.4.2/src/main.rs:98:13
note: run with RUST_BACKTRACE=1 environment variable to display a backtrace
file is probably close to this one https://github.com/nkh/P5-App-Asciio/blob/master/lib/App/Asciio.pm
I'm building my blog on netlify. Netlify have no support of Rust yet.
Blog example: https://blog.tycoach.me/breaking-the-circular-deps-1
Compared the ugly looking diagram to my local version:
For sure, I will try to persuade netlify to support rust so i can cargo install, or at least let me use my own docker image for build. Else i can migrate from netlify to something else.
(As an hack i just extracted the svg from the diagram: tychota/blog@7b40f1c)
That being said, increasing the reach by supporting Node env seems an ok concern for me.
If not, please close the issue.
x86_64-unknown-linux-musl and launch child processQuestion:
Given rust awesome of webassembly, maybe it is possible to build svgbob as webassembly
Question:
First, thank you for an awesome package!
I installed a nightly build of rust and ran cargo build on a clone of master and I also tried the rewrite3-vectorize branch.
If I generate the diagram with the CLI version eg svgbob page.txt -o page.svg, none of the styles are applied. If I use the online editor at https://ivanceras.github.io/svgbob-editor/, it works fine. What could be wrong?
I use the following input:
o-> MTSF: Add First Priority
+-------------------------------------------------------------------------------------------------------------------------------------+
| |
| LGMIM Roche Compaan LOGOUT |
| |
+-------------------------------------------------------------------------------------------------------------------------------------+
| |
| Dashboard Trend Analysis Assessment Improvement Plan Recent Activity System Setup |
| |
+-------------------------------------------------------------------------------------------------------------------------------------+
| |
| |
| MTSF .------------------------------------------------------------. |
| | {em} | |
| | Add Priority | |
| | | |
| .--------------------. | Title | |
| | + Add Priority {b} | ------> | | |
| '--------------------' | +------------------------------------------------------+ | |
| | | PRIORITY 1: ECONOMIC TRANSFORMATION AND JOB CREATION | | |
| | +------------------------------------------------------+ | |
| | | |
| | Description | |
| | | |
| | +------------------------------------------------------+ | |
| | | 2024 Impact: Increase GDP between 2-3%; create 2 | | |
| | | million new jobs especially for youth; increase | | |
| | | investment as a proportion of GDP to 23% (from | | |
| | | 18.7%). | | |
| | +------------------------------------------------------+ | |
| | | |
| | ---------------------------------------------------------- | |
| | | |
| | [ Submit ] [ Cancel ] | |
| | | |
| '------------------------------------------------------------' |
| |
| |
| |
| |
+-------------------------------------------------------------------------------------------------------------------------------------+
# Legend:
b = {
fill: lightblue;
}
em = {
fill: yellow;
stroke: black;
}
These are two a screenshots from the live editor. See what happens with the right arrow going down?
Looks not intended/like a bug to me.
Hello,
I have noticed that for this bob file:
.----------. .----------.
|{w} A |-->|{w} B |
'----------' '----------'
.----------. .----------.
|{w} A |<--|{w} B |
'----------' '----------'
.----------. .----------.
|{w} A |<->|{w} B |
'----------' '----------'
# Legend:
w = {
fill: #abadb0;
}
The rendered svg shows an issue on the second line:
Is this a bug?
convert "测试" and the second char will be cover the first char in svg.
1 <---test测试--> 测试test
\
\
'-> 测试test
svgbob < test.bob > test.svg
svg :
<svg font-family="Electrolize,Titillium Web, Trebuchet MS, Arial" font-size="14" height="80" width="168" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="triangle" markerHeight="10" markerUnits="strokeWidth" markerWidth="10" orient="auto" refX="0" refY="5" viewBox="0 0 14 14">
<path d="M 0 0 L 10 5 L 0 10 z"/>
</marker>
</defs>
<style>
<![CDATA[
line, path {
stroke: black;
stroke-width: 1;
}
]]>
</style>
<path d=" M 16 24 L 32 24 M 64 32 L 80 64 L 82 68 A 8 8 0 0 0 88 72" fill="none"/>
<path d="" fill="none" stroke-dasharray="3 3"/>
<line marker-end="url(#triangle)" x1="16" x2="12" y1="24" y2="24"/>
<line marker-end="url(#triangle)" x1="96" x2="108" y1="24" y2="24"/>
<line marker-end="url(#triangle)" x1="88" x2="100" y1="72" y2="72"/>
<text x="2" y="28">
1
</text>
<text x="34" y="28">
-test测
</text>
<text x="82" y="28">
试
</text>
<text x="90" y="28">
-
</text>
<text x="122" y="28">
测
</text>
<text x="130" y="28">
试
</text>
<text x="138" y="28">
test
</text>
<text x="114" y="76">
测
</text>
<text x="122" y="76">
试
</text>
<text x="130" y="76">
test
</text>
</svg>
> ```
Even in -->o--> it isn't.
<--+----+----+----+----+----+----+----+----+-->
| | | | | | | | |
"-4" "-3" "-2" "-1" "0" "+1" "+2" "+3" "+4"
Results in...
Notice how the alignment is off.
I'd like to create something like svgbob to generate tikz/pgf output suitable for inclusion in LaTeX documents, but haven't learned rust yet. Does svgbob have an internal representation that then gets rendered as SVG such that all I'd need to replace would be the renderer? Or is the input text parsed directly to SVG?
Can I revert an svg file(converted by svgbob) back to the original ascii text?
In some cases svgbob will take a letter inside a word and transform it to a symbol instead for letting it be a character that's part of the word; the examples I have seen where mainly with V, inside a word, be transformed in a down arrow.
svg bob could do a first pass and mark, with the help of a dictionary, the character that are not to be transformed, it should also be possible to input wors or whole dictionary of word to use if one has a technical name not part of the dictionary or uses a foreign language.
Please add release tags for your releases in the repository. It is not possible to package this application without proper release tags.
This looks like a great tool.
The online demo is great.
Could you add an upload button so I can edit in my favorite editor then upload it for rendering?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.